Родительский div не растет с плавающими детьми

У меня проблема с моими плавающими дочерними div, которые не растут с моим родительским div. Есть ли способ исправить это? Мне нужно, чтобы обертка составляла 100% содержимого в div. Вот html;Родительский div не растет с плавающими детьми

<body> 

    <div id="wrapper"> 

     <div id="leftpane"> 

      <div id="lefthead"> 

       <div id="leftheadfiller"> 

       </div> 

       <div id="leftheadlogo"> 

       </div> 

       <div id="leftheaddivider"> 

       </div> 

      </div> 

      <div id="leftcontent"> 

      </div> 

     </div> 

     <div id="rightpane"> 


      <div id="righthead"> 

       <div id="rightheadfiller"> 

       </div> 

       <div id="rightheadlogo"> 

       </div> 

       <div id="rightheaddivider"> 

       </div> 

      </div> 


      <div id="navigation"> 

       Properties Careers About Blog Advertise Contact 

      </div> 


      <div id="rightcontent"> 

      </div> 


     </div> 


     <div id="close"> 

     </div> 

    </div> 


</body>

И вот css;

html,body { 
background-image:url('images/background.gif'); 
background-repeat: repeat-y; 
background-position: center; 
background-attachment: fixed; 
height: 100%; 
width: 100%; 
margin: 0px; 
} 

#wrapper { 
background-color: aqua; 
height: 100%; 
width: 866px; 
margin-left: auto; 
margin-right: auto; 
} 

#leftpane { 
background-image: url('images/darkbackground.gif'); 
width: 326px; 
height: 100%; 
float: left; 
} 

#lefthead { 
height: 132px; 
width: 100%; 
} 

#leftheadfiller { 
height: 75px; 
width: 100%; 
} 

#leftheadlogo { 
background-image: url('images/index_07.gif'); 
width: 71px; 
height: 56px; 
float: right; 
} 

#leftheaddivider { 
height: 1px; 
width: 100%; 
background-image: url('images/lightbackground.gif'); 
float: right; 
} 

#lefttcontent { 
height: 100%; 
background-color: fuchsia; 
} 

#rightpane { 
background-image: url('images/lightbackground.gif'); 
width: 540px; 
height: 100%; 
float: right; 
} 

#righthead { 
height: 132px; 
width: 100%; 
} 

#rightheadfiller { 
height: 75px; 
width: 100%; 
} 

#rightheadlogo { 
background-image:url('images/index_09.gif'); 
width: 109px; 
height: 56px; 
float: right; 
} 

#rightheaddivider { 
height: 1px; 
width: 100%; 
background-image: url('images/darkbackground.gif'); 
float: right; 
} 

#navigation { 
margin-top: 2px; 
font-family: Arial, Helvetica, sans-serif; 
color: #A3A3A3; 
font-size: 14px; 
word-spacing: 44px; 
text-align: center; 
width: 100%; 
height: 18px; 
} 

#rightcontent { 
padding-left: 6px; 
background-color: fuchsia; 
} 

#close { 
clear: both; 
}

Есть ли способ исправить это? Я этот набор на временную папку на локальном сервере по адресу:

http://68.113.27.229/test

Две дивы, что мне нужно, чтобы заставить обертку расти в Leftcontent и Rightcontent.

Спасибо!

источник

2011-07-28 Brett

Добавить overflow: hidden в элемент родительского div.

Если вы не хотите, перетекание содержание должны быть скрыты, то попробуйте следующее:

Вставьте это как последний DIV внутри оберточной дел.

<div style="clear: both"></div>

источник

2011-07-28 09:59:19

Susam! Ты помог мне прошлой ночью, как ты снова застонал. Если я добавлю скрытый атрибут, страница потеряет свою полосу прокрутки. Я предполагаю, что вы говорите, добавьте его в Wrapper? – Brett

Это потому, что вы установили высоту в обертке. Действительно нужна высота там? Когда вы заполняете контент, div будет автоматически расти. Я посмотрел ваши CSS и HTML, и очень сложно понять ваш вопрос, потому что обертка занимает 100% ширину, а цвет aqua охватывает всю страницу. Итак, я не уверен, что вы имеете в виду, когда говорите, что он не растет. Пожалуйста, предоставьте урезанный пример, который демонстрирует только проблему и ничего больше. –

Будет, но есть причина для высоты на обертке. Мне нужен левый div, чтобы заполнить страницу до 100% независимо от того, есть ли в ней контент или нет. Без обертки, имеющей заданную высоту 100%, левое содержимое не будет расти. – Brett

Родительский div не растет с плавающими детьми

ответ

Смежные вопросы