1 reply [Last post]
krembo99
krembo99's picture
Offline
newbie
Elsewhere
Last seen: 2 years 39 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
Offline
Moderator
Dallas
Last seen: 2 hours 29 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9236
Points: 3242

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

Unplanned code results in a tangled wad of brain-cramping confusion.

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