Using Clear

Whilst float is a great technique for position an image within the flow of a page, there is a potential problem with using it...

A Problem with Float

Look at the example showing a problem with a float...

What is going on here? Well, when an image (or other element) is floated to one side it is removed from the flow of the page. In that case it is the amount of text in the main portion of the page that determines where the next element should start. If the floated element is longer than the main text, this will overlap with the following elements. Sometimes this might be OK, but in the example above, the long image overlaps the page footer, which is not normally what you would want to happen.

Using Clear

Now look at this example showing the problem solved...

Notice how the footer is now positioned underneath the long image. This is because the footer has had the style attribute clear: right added to its rule.

We can also use combinations of float and clear to create simple gallery type layouts for a page.

The clear attribute can also be used to create simple image galleries by ensuring that the correct text is always lined up with its associated image. Here is a simple example.

Back Return to the main CSS Position page.