CSS высота макета

Question

мне нужно иметь две колонки внутри <div>:

ТОКА HTML

<div id="corpo"> 
    <div id="corpo_esquerdo"> 
     asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd 
     ddddddddf asdfasdfasdfasdsdsd asdf asdf sd 
     asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd 
     ddddddddf asdfasdfasdfasdsdsd asdf asdf sd 
    </div> 

    <div id="corpo_direito"> 
     direito sdfasdfasdfasd fasd asfd asdf asdfa sdfa sdf sadf asd 
     fasdf asd fasd fasd fasdfa sdfa 
    </div> 

</div> 

текущего CSS

#corpo { 
    border: 5px #ffe4c4 solid; 
    width: 980px; 
    margin: -30px auto; 
    background-color: #f5f5f5; 
    border-radius: 5px; 
    padding: 15px; 
    color: #a8a8a8; 
    font-size: 20px; 
} 

#corpo_esquerdo { 
    width: 650px; 
    float: left; 
    border: #bababa solid 2px; 
} 
#corpo_direito { 
    width: 300px; 
    float: right; 
    background-color: #bababa; 
    border-radius: 5px; 
    color: #f5f5f5; 
    padding: 5px; 
} 

Но div#corpo_esquerdo и div#corpo_direito пересекает div#corpo ,

Как я могу это сделать для того, чтобы иметь div#corpo_esquerdo и div#corpo_direito не пересекают div#corpo?

Answer 1

Вы можете также добавить переполнения: авто в #corpo DIV

#corpo { 
    overflow:auto; 
    border: 5px #ffe4c4 solid; 
    width: 980px; 
    margin: -30px auto; 
    background-color: #f5f5f5; 
    border-radius: 5px; 
    padding: 15px; 
    color: #a8a8a8; 
    font-size: 20px; 
} 

См результат здесь: http://jsfiddle.net/nF5vZ/

Answer 2

лучший эффективный способ ИМО применять атрибут переливных

#corpo_esquerdo { 
    width: 650px; 
    float: left; 
    border: #bababa solid 2px; 
    overflow: hidden; 
} 

Answer 3

Если применить overflow:hidden к родительскому контейнеру, который содержит плавали ребенок, родитель будет расширяться, чтобы соответствовать своим детям.

#corpo { 
    overflow: hidden; 
    /* the rest of your definition */ 
} 

Answer 4

Попробуйте добавить:

overflow:hidden; 

своим #corpo_esquerdo и #corpo_direito дивы.

Answer 5

Try очистки содержимого, как это:

<div id="corpo"> 
    <div id="corpo_esquerdo"> 
    your text 
    </div> 
    <div id="corpo_direito"> 
    your text 
    </div> 
    <!-- clear --> 
    <div style="clear:both;"></div> 
</div> 

Answer 6

две вещи здесь происходит.

Один - если вы хотите скрыть содержимое за пределами границ родителя, как отмечали другие, используйте overflow:hidden.

- Вы также испытываете эффект коллапса от плавающих элементов в контейнере. Идея состоит в том, что плавающие элементы извлекаются из естественного потока страниц (например, абсолютно позиционированного элемента). Высота этих элементов не заставляет родительский элемент расширяться вертикально.

Если вы хотите, чтобы высота родителя расширялась, примените класс clearfix к родительскому элементу.

ie: <div id="corpo" class="clearfix"> 

/* For modern browsers */ 
.clearfix:before, 
.clearfix:after { 
    content:""; 
    display:table; 
} 

.clearfix:after { 
    clear:both; 
} 

/* For IE 6/7 (trigger hasLayout) */ 
.clearfix { 
    *zoom:1; 
} 

Кроме того, вы можете вставить еще один элемент ниже размещенных элементов, все еще находится в естественном потоке страницы с clear:both Css rulle применяется (как и другие отметили). Мне не нравится это решение, потому что вы должны использовать посторонние элементы, чтобы заставить его работать.

Answer 7

Добавить <div style="clear:both"></div>, прежде чем закрыть внешний DIV:

<div id="corpo"> 
    <div id="corpo_esquerdo"> 
     asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd 
     ddddddddf asdfasdfasdfasdsdsd asdf asdf sd 
     asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd 
     ddddddddf asdfasdfasdfasdsdsd asdf asdf sd 
    </div> 


    <div id="corpo_direito"> 
     direito sdfasdfasdfasd fasd asfd asdf asdfa sdfa sdf sadf asd 
     fasdf asd fasd fasd fasdfa sdfa 
    </div> 
    <div style="clear:both"></div> 

</div> 

Вот демо: http://jsfiddle.net/MU7hn/

Answer 8

проверка решения на jsFiddle: http://jsfiddle.net/Rzw44/

Это в основном применяют clearfix на материнской div, содержащего плавалиdiv «s детей.

Вы можете прочитать больше о решении here