How to confine the clearing of floated elements to their parent

In a columnar layout with floated side columns there may come a time when you want to float more elements in the unfloated centre column (such as images etc). The problem arises when you try to clear the image, perhaps to put a caption or text underneath, or you just want text to start on a new line. When you do this you find that the clear:both you added to the element you want cleared has caused the element to move below not only below your image but also below your floated columns also.

This is the element we want cleared but to remain just under the floated image

As you can see the clear:both has only cleared the image now and the left column has not been cleared the left column. The solution was to wrap the centre content in a float of its own and the clearing behaviour is confined. Back to original uncontained clear example.

All we added was the following CSS

#innercentre{width:100%;float:left}

And then nested it inside our centre column div as follows:

<div id="centre"> 
  <div id="innercentre">
    <p>All centre content goes here</p>
  </div>
</div>

Another solution that wouldn't involve extra mark-up would be to have applied "overflow" other than "visible" to the element called #centre but it depends on whether you need visible overflow or not.

Note also that IE6 and 7 would have restricted the clear to the parent div if we had provided a dimension to the original centre column and forced "layout".