Clearing Nested Floats

Nested divs with float

The wrapper must clear the content DIVs.

.page {
    overflow: hidden;
    *zoom: 1; /* for ie6/7 */
}

No extra markup is needed. Also have a look at Aslett's clearing method: http://www.positioniseverything.net/easyclearing.html

CSS clear both inside children

you can also use overflow: hidden;

<div class="wrapper">
  <div class="float"></div>
  <div class="float"></div>
</div>

.wrapper{
 overflow: hidden;
}

.float{float: left;}

check demo on jsfiddle

CSS layout problems, floats, nested divs

The problem is that intro_container does not take the full height of its children. You will get the desired effect by putting an element with the clear style set after the 2 divs you are floating:

<div id="intro_container">

  <div id="messagebox">
    ...
  </div>

  <div id="picture">
    ...
  </div>

  <div style="clear: both"></div>
</div>

This will give "Recent Work" the normal padding.

How to use clearfix css in nested blocks?

In this particular case you can make the p inline-block and you will not need clearfix (at least inside the right element). You may need to clear after the right element if you will have more content.

.left {  float: left;  width: 100px;  height: 200px;  background: green;}
.right {  margin-left: 100px;  background: yellow;}
ul.clearfix {  padding: 10px;}
.clearfix li {  float: left;  list-style: none;  border: 1px solid red;}p {  display:inline-block;  width:100%;}

<div class="left">  Image</div><div class="right">  <ul class="clearfix">    <li>A</li>    <li>B</li>    <li>C</li>  </ul>  <p>Some description</p></div>

Why does 'overflow: auto' clear floats? And why are clear floats needed?

The reason why the wrapper doesn't stretch to contain its floats by default is because the floats are taken out of the normal flow of the wrapper, so the wrapper acts as if they were never there. If there is no other content in the wrapper, that means the wrapper won't have any height.

Note that overflow: auto doesn't clear floats — it just causes the element to contain its floats by way of establishing a new block formatting context for them so that they don't intrude to other elements in the parent context.¹ That is what forces the parent to stretch to contain them. You can only clear a float if you add a clearing element after the float. A parent element cannot clear its floating children.

The reason why establishing a new BFC causes an element to contain its floats is detailed here, and the reason why overflow: auto would even cause a BFC to be established is detailed here.

¹ _{OK, maybe "just" wasn't exactly the best adverb to use.}

CSS: What does clearing INSIDE a floated div do?

An element which contains nothing but floats will collapse in height, because the floated elements are no longer in the normal document flow. In such a case, clearing after the floats will allow the containing element to retain its height.

<div id="container">
    <div id="float1" style="float:left;"></div>
    <div id="float2" style="float:right;"></div>
    <!-- if you use a clearing element, it should go here -->
</div>

Note that there are other ways to clear than using clearing elements, such as adding overflow:hidden; to the container styles.

Nested floating divs cause outer div to not grow

Non-float blocks containing float blocks will not automatically expand, since float blocks are taken outside the normal flow (or at least specially outside the flow). One way to correct that is to specify the overflow property to hidden or auto.

.tip-box { overflow: auto; }

See quirksmode for more.