krembo99
01-28-2012, 12:34 AM
Hello All,
This is my first post here , and to be honest, I usually do not need to post, because 99% of the solutions can be found already by browsing the forum (or elsewhere)...
..But this time I am struggling with a CSS layout, that in first glance might be not so difficult :
http://i43.tinypic.com/9astmu.png
A = 100% Height fixed,Width fixed, static .
B = Liquid width (Header)
C = Fixed width (Sidebar)
D = Liquid width (Footer)
E = Liquid width (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 (except C which is a fixed width sidebar).
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 location) - 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. - I am not posting the markup, because I have 4 or 5 different ones (depending on the wrappers number and position) - and I would prefer having a fresh solution from scratch...
P.s. (2) - it would be nice to have also IE6 , although it is already asking too much :-)
This is my first post here , and to be honest, I usually do not need to post, because 99% of the solutions can be found already by browsing the forum (or elsewhere)...
..But this time I am struggling with a CSS layout, that in first glance might be not so difficult :
http://i43.tinypic.com/9astmu.png
A = 100% Height fixed,Width fixed, static .
B = Liquid width (Header)
C = Fixed width (Sidebar)
D = Liquid width (Footer)
E = Liquid width (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 (except C which is a fixed width sidebar).
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 location) - 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. - I am not posting the markup, because I have 4 or 5 different ones (depending on the wrappers number and position) - and I would prefer having a fresh solution from scratch...
P.s. (2) - it would be nice to have also IE6 , although it is already asking too much :-)