float divs inside container, text leaks out the bottom of the container, I want it inside the container.

I have 2 divs inside a container, Each of the inside divs are floated to the left and right, I want to make 2 columns for data inside the main content div. Currently, text leaks out the bottom of content-left and content-right, even though they are contained within content.

Here is a 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>

And the 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;
}

Also, any tips about floating开发者_JAVA百科 items would be great and might earn reps if I find them useful, I thought I had it mastered but obviously not! :P

You just need to add a clearing br inside the last 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/

This is happening because the floated elements are taken out of the document flow.

Currently, text leaks out the bottom of content-left and content-right, even though they are contained within content.

You need to "clear/contain your floats", more information here: http://www.ejeliot.com/blog/59

One simple way to do that is to add overflow: hidden to #content.

See: http://jsfiddle.net/sahbz/8/

Pure CSS

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