What's the correct way to layout this CSS code?

[celebritymusic]

Hi

I'm a newbie to CSS - have been playing with it for the last month on my website.

Have been trying to get my head around a layout problem.

Say I have one main DIV, and within it I want three other divs lined up one next to the other. The left and right DIVS are thinner than the middle div.

What is the correct way to acheive this layout?

The way I've done it (which works in Firefox, but not IE), is to float the right DIV to the right, then create a containing DIV for the left and middle DIVS - floated to the left. In the container, I float the left DIV to the LEFT, and the middle div to the right.

So it looks like:

<div id="rightcontent"></div> (floated right)
<div id="container"> (floated left)
<div id="leftcontent></div> (floated left)
<div id="middlecontent></div> (floated right)
</div> (closes container)

In IE, the middle DIV always appears underneath everything else.

DIVS are weird. I swear I would have had this site made a couple of weeks ago with tables, but I want to understand DIVS as they are more efficient.

Cheers

Shaun

[celebritymusic]

I'm missing something fundamental here.

If you place a div within another div, shouldn't the first one expand vertically to accomodate the nested one?

Cheers

Shaun