There are a lot of liquid layout templates out there, but none of them ever seem meet the requirements that I often come up against.
For example, I need a liquid layout that:
- has 3 columns
- the left and right column are fixed widths
- the center column is liquid
- the layout stops shrinking at a minimum width
- it stops stretching at a maximum width (at which point it centers itself in the browser window.)
After mucking about with this I am happy to report success! The key was to get away from using percentages and absolute positioning.
Percentages work well when everything is liquid. But when it is specified that one or two column need to have a fixed width, then using percentage widths breakes down.
I struggled with this. "There has to be a way!!!"
I mucked around with nestin absolutly positioned elements inside a relativly positioned element. Nope.
Then remembering the method on how to "center" a <DIV> using margin: 0px auto;, it dawned on me. Instead of trying to define the width, define the margins instead. Worked like a charm. The key thing to remember is to set the left and right margins to be equal to the widths of the left and right columns.
The layouts are have a minimum width designed for 1024 screen resolutions. Any smaller that that and all liquidity stops and scrollbars appear. I picked 1600px as tha maximum to stretch to, because at some point you may no longer want your stuff to stretch.
3 Column Layout
- Fixed - Liquid - Fixed 1024 minimum, 1600 max, right and left columns fixed width, center column liquid
2 Column Layout
- Fixed - Liquid 1024 minimum, 1600 max, right and left column/region liquid
I've tested these screens on all browsers (IE7, IE8, FF 3.5, Opera 10.0, Chrome 2.0, and Safari 4.0 (for windows). I however no longer have access to IE6, so I couldn't test it on that browser.
The bonus with this method is that it is ridiculously simple.
No comments:
Post a Comment