CSS Floating Div Element Issue

Question

I have coded a little bit of my website, but I'm noticing I have to make stupidly big adjustments to get things to fit nicely together, I believe its because I have 2 floating elements and the float is carrying onto the next set of divs even though there not nested!!

Does anyone know why this is happening to make things simpler I have made it live so far what I have done in this example you will notice (if your monitor is wide enough) that the text "Do you have special requirements?" has the "Do" about half way up the page?

I think the problem lies around the div tags "bannerleft" and "bannerright" after that I think the float carrys on and breaks everything? I could be wrong

Here is the live example Here

Answer 1

It's because you haven't cleared your floats (the two divs in question) .. simply add

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

after the bannerright/bannerleft divs to clear the floats and allow the rest of your document to respect those floated elements .. when you float something you take it out of the "flow"

Read this link from MDN for more info on clearing floats ..

P.S. (There are many different ways to clear floats, some cleaner ways than the method I provided, I just did it for simplicity)

Answer 2

Nat, this is not happening in firefox. Try placing a either a max or min width on your body tag, maybe 980px and also include overflow: hidden on the body tag.

Answer 3

Try:

.clearfix {
clear: both;
}

On the last floated element