Layout help: A header, 2 scrollable middle columns and a footer

[dfrechet]

Hi,

I am designing an administration inferface for a product that we are currently developing. My problem is that I just can't get any table or CSS layout to work like I want.

Here are my requirements:

- Page layout:

+-------------+ 
¦.{h}.........¦ 
+-----+-------¦ 
¦.{l}.¦.{r}...¦ 
¦.....¦.......¦ 
¦.....¦.......¦ 
¦.....¦.......¦ 
¦.....¦.......¦ 
¦.....¦.......¦ 
+-----+-------+ 
¦.{f}.¦.......¦ 
+-------------+

- {h} = The header (height: 70px, width: 100%, overflow: hidden)
- {l} = The left middle column (height: VARIABLE (see below), width: 230px, overflow: auto)
- {r} = The right middle column (height: VARIABLE(see below), width: auto, overflow: auto)
- {f} = The footer (height: 50px, width: 100%, overflow: hidden)

Additional requirements:
- The layout must always fill the entire window area and not overflow in any direction. The phpPgAdmin interface ([phppgadmin.sourceforge.net ]) is an perfect example of what I want, however it is based on frames and I do not want to use frames.
- The footer must always touch the bottom on the window.
- The right middle column must always touch the right side of the window.
- The height of both middle columns must stretch to take up all available space between the header and the footer.
- Scrollbars appear only if the content of a middle column overflows.
- Scrollbars in the middle columns are independant from each other. For example, the left column may show a vertical scrollbar while the right column does not.
- The page's min-width is 750px and min-height is 500px.
- The resulting layout must work in IE 6+ and Firefox 1+.

Any help is truly appreciated.

dfrechet

[dwighty]

Hi dfrechet,

I would suggest that if you wanted to use tables you need to spilt the page into sections.

1) Header
2) Main Page (this includes the left and right column)
3) Footer

For each section if you use a table with 100%width and set your height accordingly.

For the Main page you define your 2 columns, left and right and set the widths accordingly. Under the left column, start a new table defining the width as 100% and the overflow as needed. Do the same under the right.

The best way would be to use CSS where you can define the min-height so if your content page does not fill out with information the page will still show a min-height and so your footer will remain at the bottom of the window.

If you could post briefly what you have tried and that will probs be a easier way to make adjustments.

Nice One!