Floating elements using CSS is a good way to lay out items on a page, but when some elements are floated they lose their space in the flow if items, which results in the overlapping of elements.
The easy way to do this is to create a new element, typically a div, with a clear attribute and add it after the container with the floated elements inside. This in theory is good, but if you need to clear a lot of items, this task can get tedious.
The easy way to clear floated elements I came across a little while ago is very straight forward. Assuming you have a div containing your floated elements (in this example we’ll use a class of container) just add the following CSS.
div.container {
height: 100%
overflow: auto;
}
With this method being around for a while now, there are plenty of more detailed explanations around the web if you need more information, and I would recommend giving this post a read first and see if it answers your questions, http://www.quirksmode.org/css/clearing.html.
Related posts:
