1 reply [Last post]
krembo99
krembo99's picture
Offline
newbie
Elsewhere
Last seen: 2 years 43 weeks ago
Elsewhere
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 .

AttachmentSize
20111223.dl-logo-2.png1.95 KB
gary.turner
gary.turner's picture
Online
Moderator
Dallas
Last seen: 1 min 9 sec ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9261
Points: 3267

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.

cheers,

gary

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.