CSS Layout and Positioning question

[Kata]

Hi all,

I have a PSD, currently under discussion in another thread, about how I wish my website to look. I am trying to set up a CSS template in the same shape, and am using relative positioning.

Here is the picture of how I want the layout: (final will have 3 boxes across the middle, not 2).

Desired Layout

And here is my current effort:

Current layout

The problem is, because of relative positioning, the page ends up about twice as long as it should be, with a whole screen of blank space at the bottom! Is there a better way I could do this? I have tried to have a go with 'float' but the boxes shoot off in weird directions.

[Steve]

I think you'd be much better off using floating elements and margins and CSS background images where necessary. Should be nice and easy seeing as it's fixed width.

Alternatively use absolute positioning - trick here is to make the parent element position: relative, then any absolutely positioned children are done so within the confines of the parent. I think you have to make sure everything has a width/height defined though else you run into IE6 "hasLayout" issues - if you care, of course

[scaryjim]

Personally I'd go for the Absolute positioning for all the "layout" elements with appropriate margins on the "content" element - so your menu, splash image and text boxes would all be position: absolute; and then you'd have a <div id="main"> with the top-margin set to ensure the content started below the splash image and menus.

Frankly, relative positioning is a PITA and far less controllable than absolute, if what you're looking for is control over the appearance then absolute is your friend. Alternatively, if you want any elements to maintain their position in the window while the content scrolls under or over them, you can use position: fixed; - very useful for setting up "frames" type pages without messing around with frames.

[Kata]

Well, the second try is looking a lot better so far - thanks for the tips!

My next puzzle is setting up a decent CSS dropdown menu...

[Steve]

Oh there's loads of ways of doing that, again absolute positioning within the relatively positioned top bar is the way I tend to use - have a google there are various ways.

Of course, for IE6 compatibility, you'll have to rely on a:hover as it doesn't work on any other element, otherwise you have to crack out the javascript.

[Shurike]

For CSS menus you could have a look at cssplay.co.uk (specifically cssplay.co.uk/menus/final_drop.html) - I found it a good starting point for a pure CSS menu.