View Full Version : stubborn CSS Layout - In search for a solution

01-28-2012, 01: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 :


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 :-)

01-28-2012, 11:26 AM
Hey there,

I don't wanna discourage you, but would suggest to consider whether it really is a good idea to have liquid layouts. There are two important reasons why it is not:
1. Research has shown that the line length has an optimum of some 65 characters, including spaces, with limits of 45 and 75 characters.
2. Your layout will suffer from being displayed on large and small screens, among many other things because images are not liquid.

I only make fixed-width layouts of some 1000 pixels wide (because with the tablets 1024 is making a come-back), and separate, fast loading pages for mobile phones with a text enlargement knob. People really like that.