The wait is over, finally a real ‘sangraal’ layout that ticks all the boxes:
- 3 column, 2 column, 1 column it’s all flexible
- Fluid centre layout
- No need for negative margins.
- Works in ie5+, firefox 1+, opera 9.6+, safari 2+, chrome
- Minimal mark-up & clean CSS
With inspiration coming from A List Aparts’ article ‘
In Search of the Holy Grail‘ but with a need for a better way without the use of negative margins to help pull the main content back into place. Making it a much more powerful, flexible layout with a much easier setup. Let’s take a look at an example before we delve into the inner workings.
If you refer back to the “A look at pure CSS IE6 min-width solutions” article you’ll see how the min-width works in IE6. There is only 1 slight difference with this, the actual min-width property is on the .maincontainer div and not the .min-width div. The min-width mark-up has also all been moved within the IE6 conditional comments so it will only render for IE6 and not cause any problems with the good browsers.
A layout to remember…
This layout isn’t perfect but it comes damn near close. It is a little heavy on the mark-up but for what it accomplishes I think that’s ok. The order of the div’s will also be a concern to some especially those using screen readers as going from the left to right to middle may disorientate some.