float divs внутри контейнера, текст просачивается из нижней части контейнера, я хочу его внутри контейнера.

Question

У меня есть 2 div внутри контейнера, каждый из div'ов перемещается влево и вправо, я хочу сделать 2 столбца для данных внутри div основного содержимого.В настоящее время текст просачивается в нижнюю часть контента слева и справа, даже если они содержатся внутри контента.

Вот jsfiddle

<div id="content">
    <div id="content-left">I want to put content in here<br/><br/><br/>This is outside? why?    </div>
    <div id="content-right">and more in here</div>
    Maybe other content here, inside the content
</div>

И CSS

#content-left{
width: 50%;
border: 1px dotted #aaa;
float: left;
}

#content-right{
width: 49%;
float: right;
border: 1px dotted #aaa;
}

#content{
background-color: #eee;
width: 95%; /* Width of Main Content Div, % for Fluid*/
height: auto;
max-width: 1350px; /*Max width, To wide on big monitor*/
margin: 0 auto;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
}

Также, любые советы о плавающих элементахбыло бы здорово и мог бы зарабатывать повторения, если бы я нашел их полезными, я думал, что справился с этим, но, очевидно, нет!: P

Answer 1

Вам просто нужно добавить очистку br внутри последнего div

 Maybe other content here, but this should be below the 2 above divs in the rendered view.
    <br style="clear:both;" />
</div>

http://jsfiddle.net/jasongennaro/sahbz/9/

Это происходит потому, что элементы floated извлечены изпоток документов.

Answer 2

В настоящее время текст просачивается внизу содержимого слева и право на контент, даже если они содержатся внутри контента.

Вам необходимо "очистить / удержать ваши поплавки", более подробную информацию здесь: http://www.ejeliot.com/blog/59

Один простой способ сделать это - добавить overflow: hidden к #content.

См .: http://jsfiddle.net/sahbz/8/

Answer 3

Чистый CSS

.content:after {
  clear: both;
  content: '';
  display: block;
}