1 reply [Last post]
krembo99's picture
Last seen: 4 years 1 week ago
Timezone: GMT+1
Joined: 2008-03-22
Posts: 5
Points: 2

Hello All,
I am struggling with a CSS layout, that in first glance might be not so difficult , which is this :

A = 100% Height fixed, static .
B = Liquid (Header)
C = Fixed (Sidebar)
D = Liquid (Footer)
E = Liquid (Main Content)

Basically A should always be 100% height and in static position (meaning it is "glued" to place) and B+C+D+E (enclosed in the yellow frame) should be scrollable area that is liquid in width.

You can actually look at it as an (i-)framed two column.

But this layout proves to be much more complicated that it looks for cross browser standards.
Every time I think I got the right markup (depending on wrappers locaation) - something is going wrong in SOME browser.
In some cases , the whole layout is messed depending on CONTENT inside the main area (meaning that it works on some pages, and on some it doesn´t)

Does anyone has a bullet-proof tested solution for such a layout ??

P.s. - it would be nice to have also IE6 , although it is already asking too much .

20111223.dl-logo-2.png1.95 KB
gary.turner's picture
Last seen: 6 hours 50 min ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9506
Points: 3557

Hi krembo99, I'm guessing you

Hi krembo99,

I'm guessing you have have misunderstood some terms. A static position is is not "glued", as you put it, to the viewport; that is what "fixed" position is. Static is the default position as the element falls in the document's flow. See §9 Visual formatting model. See §9.6 for fixed position.

To get an apparent 100% height for the fixed column, use a technique called faux columns. Put the bg image on the html element.

Do keep in mind the a fixed column such as you want is fraught with gotchas just waiting to bite you, while delivering little actual value.



UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.