main content
This is DIV #content-main, and would be the main content area of the page. It has no positioning applied, has its width defined by setting the left and right margin to 185px. A comment hack was used to send a width of 100% to NN4. It is nested within the DIV #content-wrap and follows the DIV #content-sub-2 in the document structure.
There are other CSS rules which involve this DIV, but they apply to the presentation of the elements within it, and have nothing to do with the structure of the layout.
The CSS Rules
Using the Caio comment hack, the following is sent to NN4 only.
- #content-main {
- width: 100%;
- text-align: justify;
- }
Using the Simplified Box Model Hack, and the @import rule which prevents styles from being read by NN4.x, the following is sent to all other browsers.
- div#content-main {
- width: auto;
- \width: 100%;
- w\idth: auto;
- height: 100%;
- text-align: justify;
- margin: 0 185px;
- min-width: 125px;
- overflow: hidden;
- }
I’d seen 3 excellent layouts by Craig Saila, Al Sparber, and Mark Newhouse, but they all had a few drawbacks. Though they all do a good job of creating a 3 column layout that works cross-browser/cross-platform including NN4.x, none of them really met the criteria that I felt was necessary for real-world use.
Starting with Mark Newhouse’s version (which I thought was the closest), I set out to tackle the issues the other layouts ran into.
Here’s what was lacking. One thing was the ability to account for a variable size header. While Mark’s layout accounted for columns of varying size, it relies on the header being a specific height and positions one of its DIVs based on that height. And while the use of a fixed height header is not uncommon, it isn’t always realistic. Dynamic content in the header can cause the layout to break. There were also problems with overlap of the columns in some of the layouts, and I wanted to find a way around this.
This version has overcome the problems I wanted it to, and is known to work in both Mac and Windows versions of NN4, NS6+, Opera 6+, and Mozilla. It is also known to work in Win IE5.5/6,and Mac IE4.5/5+. Tests have shown that it does not work correctly in Win IE4.x (my condolences to anyone using it).
Across all ‘standards compliant’ browsers the layout display is identical. (Update - A Windows IE bug causes a slight glitch in the center columns margins in IE6. There is currently no known cure.) NN4.x though flawed, will display the layout almost perfectly. Since the layout doesn’t rely on positioning, it does not require the NN4 resize fix.
Credit should be given to the above named gentlemen, since this is an extension of their work. Credit and thanks should also go to Philippe Wittenbergh for changes that made this layout work in Mac IE4.5, and more stable in Win versions of IE. Thanks also needs to go to Eric Tribou who provided a fix for a margin bug that plagued Win/IE.
Thanks also to the list at css-discuss, for their feedback and testing.