Properly Aligning HTML Sections with CSS

[nko]

Alright, I'm writing a web page. Lets say I have four sections on this one page. The layout looks like this:

First Section
Second Section(Left Aligned), Third Section(Right Aligned)
Fourth Section

No sidebars, nothing like that, just four areas of information. What I've tried doing so far is making the second section left aligned by making it a div with style="float:left". The third area, then, is a div with style="float:right". This works fine as long as I completely leave section four out, which I can't do. Section four wants to get in between the previous two sections. I've tried encapsulating the second & third sections in a parent div and making section four fit in its own div, as well as setting the width of 2 and 3 to 50% each (which just spits out a VERY funny lookin' page).

How do I make this layout come true? Is float entirely wrong for this purpose?

[bwkaz]

Perhaps set:

clear: both;

on the fourth div?

In my experience, it doesn't work to set "float: left;" on one div, "float: right;" on another div, and "width: 50%;" on both of them. (I'm not sure if this is because of my misunderstanding the box model, or if it's because the browsers I was testing it on were slightly broken.) If I did that, it acted like the total width would have been too much, and put the second div below the first one. If that was what you were seeing, you probably need to set the widths to 49% (or 49% on one and 50% on the other); that should help.

"clear: both;" will ensure the 4th div gets put below both the second and third (it needs to be "both" in case one of the divs happens to be longer than the other).

[nko]

Ahah! I completely forgot what clear was even for. I think that has something to do with the fact that I just got back in to HTML / CSS for the first time in 4 years. Might be something else, but that's what I'm thinking. Thanks!