1 reply [Last post]
krembo99's picture
Last seen: 4 years 38 weeks 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 21 min ago
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9590
Points: 3656

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.



If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.