Topic: Multi Column Layout - Can it be done with out tables?

I'm having some problems with layouts i need to achieve - while i try my hardest to only use legit css, use tables for table data etc - css just doesnt seem to be able to handle multiple columns all that well.

The problem: While having multiple columns is quite simple, the problem is that i need all of the columns to effect the height of a containing element (likely a div).

The way I have it now, I have 3 columns, the middle column is positioned relative so it expands the containing div and moves the footer down - but when the left column (menu) or right column (news & info) is bigger than the middle column, the footer gets covered up but the side columns.

So... is there a good way of doing this via css? I want a solution that works for 2 to 6 columns. Am I better off just using tables for the layout of these columns (i REALLY don't want too).

I have seen some places achieve this in some ways, but it involves alot of CSS hacks - which IMO defeats the whole point of using CSS in the first place, it makes it complicated to change etc etc.

Anyone able to help/suggestions?

quote:

---

H][RO said:

The way I have it now, I have 3 columns, the middle column is
positioned relative so it expands the containing div and moves the
footer down - but when the left column (menu) or right column (news
& info) is bigger than the middle column, the footer gets covered
up but the side columns.

---

So, are the other two columns positioned absolutely? This would be a huge mistake.
If this is not the case, then all of the divs will determine the height of the parent div.

Do you have a link we can look at?

Also, have a look at some of these -


http://www.gurusnetwork.com/discussion/thread/2907/
http://glish.com/css/
http://www.bluerobot.com/web/layouts/
http://www.positioniseverything.net/

Yeh at this stage the two columns are absolute - which is what alot of sites (including bluerobot) still seem to do. Obviously this is largely the problem..

http://iisoft.biz/test.php

This is just a test page I have been playing with, basically I want a header, content area which can be split up into any number of columns, and a footer which gets pushed down by the biggest column.

Also the overall width of the page needs to be contained to a fixed size if desirable.

The final requirement is that the content element is the first in the HTML order of things, obviously i don't want the navmenu at the top of the html.

Well looks like
http://www.positioniseverything.net/articles/onetruelayout/anyorder

might be the right solution, a lot of the other ones use either absolute or floats with ordered columns. This style allows you to use the floats and order the code on the page how you see fit which is nice.

The css is a bit messy with all the hacks, but i guess there isnt much that can be done about that. When they design the browsers they need the part that handles displaying css etc to be updatable exclusively off the browser so we wouldnt need all of these hacks. Nothing new there tho =/

http://iisoft.biz/test5.php

I will see how it goes, the problem is it can require 'tweaking', and i need somethign rock solid for where i want to use it - where the number of columns/sizes etc will be change constantly.