How Do I Create This Layout In CSS?

[pab1953]

How do I create this layout using CSS? I can see how to get most of it done, but I don't know how to get the three columns under Top Right Box to behave themselves.

Thanks.

--------------------------------------------------------
Header
--------------------------------------------------------
Horiz Nav
--------------------------------------------------------
------------¦ ¦-------------------------------------------
Left Column ¦ ¦ Top Right Box
Left Column ¦ ¦ Top Right Box
Left Column ¦ ¦ Top Right Box
Left Column ¦ ¦ Top Right Box
Left Column ¦ ¦-------------------------------------------
Left Column ¦ ¦-------------- -------------- --------------
Left Column ¦ ¦ R Column 1 ¦ ¦ R Column 2 ¦ ¦ R Column 3 ¦
Left Column ¦ ¦ R Column 1 ¦ ¦ R Column 2 ¦ ¦ R Column 3 ¦
Left Column ¦ ¦ R Column 1 ¦ ¦ R Column 2 ¦ ¦ R Column 3 ¦
Left Column ¦ ¦ R Column 1 ¦ ¦ R Column 2 ¦ ¦ R Column 3 ¦
Left Column ¦ ¦ R Column 1 ¦ ¦ R Column 2 ¦ ¦ R Column 3 ¦
Left Column ¦ ¦ R Column 1 ¦ ¦ R Column 2 ¦ ¦ R Column 3 ¦
Left Column ¦ ¦ R Column 1 ¦ ¦ R Column 2 ¦ ¦ R Column 3 ¦
------------ -------------- -------------- --------------
---------------------------------------------------------
Footer
---------------------------------------------------------

[ebby]

I dont think anyone is going to provide you the code, that's your job, but we are here to help you. I can tell you right now by looking at that you should probably be thinking in terms of container divs. I would imagine those three columns would be 3 divs inside a larger container div for positioning purposes. Hope that helps.

[RedCorn]

Simply create the 3 columns as fixed width divs and float them left. Make sure they aren't set to display:block or they will stack vertically.

[SuzyUK]

...float them left. Make sure they aren't set to display:block or they will stack vertically.

With all due respect .. Welcome to WebmasterWorld redcorn! but the minute you float ANY element it will automagically become a block level element.. whether you state the display property or nay..

floating elements in general is good, and safe if you know what 'floats your boat' (floating as opposed to positioning has been my favorite way to make layouts for a few years since), but please know that you're floating the blocks (as in one can go 'neath the other) and that you're not messing with inline blocks which, by promise should be like 'cells' but are not quite ready for public consumption, they show great promise and WILL take over but for a wee while it's floated blocks as far as I can tell ;)

[Xapti]

Well said. Floats are very critical in designing semantic sectioned webpages like this without using tables. Absolute positioning based layout can do some things that floats simply cannot, but it's rare you'll really need to use them. The downside to positioning is it's not good with fluid layout; simple additions and modifications may require more work because most, if not all, elements are not in normal inline or block flow.
Floats are the staple of most layouts, just be careful with them, because they do and don't do many things you may not know about, taking a bit of time to master.

[edited by: Xapti at 7:18 pm (utc) on Nov. 3, 2007]