Lesson 12: How to leave space beneath floating block elements

If you have trouble with floating block elements having no defined height there is a neat solution to it.


This picture is inside a block which is floated left. Any text that follows will just sit next to it.

If you want the text after the image to come out beneath it you don't want to add loads of <BR /> tags to artificially line things up. A more certain and clean approach to giving the element some height is as follows:

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


Here is the picture again...

...but with the extra empty div below it to give it some fake height.