LINUX.ORG.RU

Не могу создать вложенный DIV для отступа - не учитывается padding/margin родительского элемента


0

1

Здравствуйте!

Такая проблема возникла. Есть окно с тремя областями, как в классических 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>
★★★★★

Ответ на: комментарий от Xintrea

Блоку с деревом пропиши float left. Два правых блока положи в новый div, ему пропиши width. Соответственно убери все position и left..%/right..%. Сейчас сделал в firebug, всё нормально.

anonymous ()

Правые дивы должны быть в отдельном диве. Этот отдельный див в float: right, и, как уже сказали, дерево-див в float: left

pztrn ★★★★ ()
Ответ на: комментарий от anonymous

У меня версточный кретинизм. Никак не могу понять, как делать резиновый интерфейс в размер окна без использования position:absolute.

Xintrea ★★★★★ ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.