Fix Floats Breaking out of Divs in Css

by Martin White

When designers and developers first start using CSS for page design and positioning the use of floated divs can seem very appealing as a quick and easy way to (for instance) position the two main content area divs of a site design.

For instance you may want a left hand div to contain a main navigation menu and a larger right hand div to contain the basic content or copy of the site’s pages.

OK so have a page design 980px wide.

Within a ‘containing’ div, you set the left ‘#menu’ div to float:left and the right ‘#content’ div to float:right, give them both a compatible width so that they can exist side by side with enough room.

Looking pretty good!

Now lets add a footer div below these two (still within the ‘containing’ div), for copyright info etc.

OK seems fine. Lets ad some copy to the #content div.

You add some content to the div which in turn expands the height of it and Oh Oh! The div ‘breaks out’ and content spills over your new #footer div destroying your layout.

The answer? The property ‘clear’.

We can use the clear property to prohibit floated elements of a div appearing to the right, left or both sides of another div.

In this case we should set or footer div to use clear:both.

This means #footer will not allow the #menu or #content divs to appear to it’s left or right (both) and in practice this stops the content of either breaking out over our footer.

A full explanation of the clear property can be found on the W3C schools site here:

https://www.w3schools.com/cssref/pr_class_clear.asp

BrightLemon