floating div not coming in inner div - css-float

Question

Whenever a div is floated left or right, it overlows from its container div. The div fits into the container div if its float property is removed. How come this is being occured? Please tell me. Please refer to my jsfiddle at http://jsfiddle.net/ZtJZS/. The foollowing is my code :-
<div class="main">
<div class="left-content">
This is an example content<br />
This is an example content<br />
This is an example content<br />
</div>
</div>
The css code can be found in my fiddle...
Thanks in advance.

Answer 1

That is the way it works with floating items - floating content "does not count" for parent item's height.
To work around it, you have to choose some of the options:
make the .main div floating as well, as it can be seen in this version of your fiddle. This may, however, not be acceptable for your layout.
use overflow:auto to make the outer div span the inner one. The "new solution" described here works really well: http://www.quirksmode.org/css/clearing.html This is how it looks in your fiddle.

Answer 2

What you need is a CSS clear fix. It will clear the height of the containing div.
Add the following to your style sheet:
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
And add the cf class to your containing div.
And here's an example jsFiddle.

Answer 3

also you can put div at the end of main div and it will do what you want
<div class="main">
<div class="left-content">
This is an example content<br />
This is an example content<br />
This is an example content<br />
</div>
<div style="clear:both"></div>
</div>

Answer 4

You can add overflow:hidden; to your main style. This will make your cointainer to streach. See http://jsfiddle.net/ZtJZS/4/
div.main{
width:90%;
padding:15px;
border:1px solid #000;
overflow: hidden
}
Add height to the style, if you want to make limit its vertical streach and add vertical scrollbar to make the container scrollable