Здравствуйте!
Такая проблема возникла. Есть окно с тремя областями, как в классических E-mail клиентах:
+--------+--------------------------+
| Tree | Notes |
| | |
| | |
| |--------------------------+
| | Text |
| | |
| | |
| | |
| | |
+--------+--------------------------+
Нужно чтобы в области Notes и в области Text были вложенные дивы, дающие отступы по 10px от границ. Задача простая, но я не могу ее сделать!
Проблема в том, что размер вложенного DIV-а считается безотносительно margin и padding родительского DIVA. И вложенный DIV имеет тот же размер что и родительский, просто сдвинут вправо и вниз на величину padding родительского элемента.
Получается, что при резиновой верстке невозможно сделать просто вложенный элемент с нужным отступом.
Вопрос: как обойти эту проблему? Есть ли решения?
Вот очищенный код для экспериментов:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* ----- BEGIN reset.css ----- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ----- END reset.css ----- */
body, html {
height:100%;
}
#container {
position: absolute;
height: 100%;
width: 100%;
background-color: #F0F0F0;
}
#wrapTree {
position: absolute;
height: 100%;
width: 30%;
background-color: #FF8080;
}
#wrapNotes {
position: absolute;
left: 30%;
height: 25%;
width: 70%;
padding: 10px;
background-color: #80FF80;
}
#wrapText {
position: absolute;
left: 30%;
top: 25%;
height: 75%;
width: 70%;
padding: 10px;
background-color: #8080FF;
}
#tree {
height: 100%;
width: 100%;
background-color: #FFF3F0;
overflow-y:scroll;
}
#notes {
height: 100%;
width: 100%;
background-color: #FFF3F0;
overflow-y:scroll;
}
#text {
height: 100%;
width: 100%;
background-color: #EFE8E8;
overflow-y:scroll;
}
</style>
</head>
<body>
<div id="container">
<div id="wrapTree">
<div id="tree">
Tree
</div>
</div>
<div id="wrapNotes">
<div id="notes">
Notes
</div>
</div>
<div id="wrapText">
<div id="text">
Text
</div>
</div>
</div>
</body>
</html>
