0

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.

4 Answers 4

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:

1

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.

0
1

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>
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.