DIV Layout / Design Help Needed

spike1207 · 12th September 2008, 02:06 PM

Hi All,

I'm trying to get a very specific site layout. Have been messing around with trying to do it with DIVs for about a week and finally given up and resorted to using good old fashioned tables

However, I know that's not ideal. Was wondering if there's any DIV guru's out there that could offer some guidance ? Here's what I'm trying to accomplish:

3 Column layout, left and right are 150px, with the content aligned top, and will stretch to 100% page width and height.

Middle column is 3 'rows', top and bottom are 25px high, aligned centre, and 100% of the width of the middle column (these will contain CSS navigation menus).

Middle column is where the main content will be and should always be 100% height so that the navigation rows are always at the top and bottom extremities of the page.... i.e. the top and bottom rows of the middle column are not to be static on screen and should always be at the immediate top and bottom of the page.

Here's an example using tables: Albannach Test Page

Can anyone suggest a way to do this using DIVs before i rip the rest of my hair out ?

Thanks for any suggestions.

Cheers,
Chris.

terraGirl · 13th September 2008, 05:11 PM

A good tutorial is here: glish.com : CSS layout techniques : 3 columns, the holy grail

The problem is usually with 100% page height, assuming that you mean the <body> tag by page. DIVs stretch only to the height of their content. Workaround is a container div (with contains all the columns) and has a background, thereby providing a "fake" column background.

If you need divs always at top/bottom, then best way is to use absolute positioning. Absolute works in reference to browser window, but there's a trick where if you place an absolutely positioned div into a relatively positioned div, then the absolute is in reference to the relative containing div.