BOX
LESSONS
This page has no tables.
Under the white there's three columns plus one box that spans the top, all in CSS. Current versions of Explorer, Netscape, and Opera show exactly the same page, with the same font size, and on PC and Mac. Older browsers just show an unformatted page and default fonts, but with neatly ordered headings and text and a polite message that it's time to upgrade your free browser, with a link to do that. Text browsers, web-enabled cel phones, web-readers for the blind, ... these all get the neatly ordered text. There are no misappropriated tables screwing things up. And there are no sniffers sending the various browsers types and versions to tailored pages. One page serves them all. This was the original promise of the web, and we're finally back to it. Welcome to 2001.
This quick semi-tutorial describes how I built this page. I'm no expert. But this page works, so here's how I did it. I presume you know what style sheets are, have probably used them for typography, knew of their promise for the future, but kept using tables for layout because they were the only thing that worked right now. Well, Jeffrey et al (see sidebar) have broken our chains, and we can finally use pure CSS.
Sort of. The only tricky bit is that Internet Explorer 5 for Windows, because it led the pack, understood style sheets better than everything else at its time of release, but not as completely as Netscape and Opera do today. So it dances past the message to upgrade, then embarrasses itself by appalling misuse of the boxes. And it's the most common browser at the moment.
So this is about writing correct code with a few considerations for IE5Win built in. It's not bad once you get through it once, and it's nothing like all those kludges we had to pull before.
Setting The Box Tops In Line
Start with three columns by themselves first.
The trick is to use absolute boxes with fixed widths on the sides, and a plain old box in the middle with its side margins set as greater than those widths. The middle box can then expand with browser size.
THE PROBLEM : IE5Win screws up differently in absolute boxes and non-absolute boxes. With the middle box, IE5Win sees margin-top, but puts it UNDER the P margin-top, and both of them outside the box, instead of putting the P margin-top inside the box... Which means whichever is larger will decide where the top of the middle box sits. Also the distance between its text and its top border will be only the padding, instead of padding plus P margin. BUT in absolute boxes IE5Win gets P margin inside the box, but now overlaps it with the padding, instead of adding them together. So text in IE5Win will always start higher in all the boxes. So you do have to design with that in mind. You're a designer, right?
THE SOLUTION : To get the box tops in line, and the text tops in line, decide the real distance you want from the top of the page and use that for the absolutes' tops. Now, the middle box margin-top must be made equal to the absolute's tops, and must be equal to or larger than P margin-top, and P margin-top must equal the padding-top set in all three ... and that's also the distance the text in IE5Win will be higher. Happily, different border widths do not effect this, although IE5Win puts borders inside the box.
Anything Else?
Yeah. Look at the code for the boxes. See how there's a dimensional value for boxes for IE5Win, and then a more modern CSS2 selector with another value for the other modern browsers? IE5Win can't see it. Thank your stars. That's what makes all this possible. You'll be writing that double standard for a few more years so play around with it some. IE5Win puts padding and borders inside the box dimension, and the others put these outside the box dimension. It's our new mantra.
So, You Want A Box Above That?
Okay. You must set height for the top box. Trust me, or your life will be hell. Now set the desired top distances for the absolute boxes, measured from the top of the page. BUT the middle box margin-top counts from top box's border's lowest edge. Borders are interpreted differently in the browsers, but this cancels out here; the lowest edge ends up the same in all.
TROUBLE UPSTAIRS : Beware of text in the top box. Long lines will wrap in smaller windows. IE5Win expands the box height if it needs the space, while the others overflow the box. Beware also of BR. IE5Win renders it smaller. If you want your text to look the same across browsers, use a nbsp in a P tag in the html. But best is to make sure everything is small enough to never bust the box. Text use is limited here. Another sticky thing is that P margins are added outside the box so they must be zero. Netscape 6 doesn't do this, but Opera 5 does. Similarly, images plus padding must be equal to or less than the box height.
GETTING TOUCHY : If you want the boxes to touch, remember that IE5Win puts P margin outside the box. You didn't care before, because it slid under the box margin. But now your P margin-top has to go to zero. Did I just hear you scream? It's okay. Put the subtracted amount into P margin-bottom to make your typography nice again. Yes, this is a bad kludge because you have to remember it when you redesign the site. That's why I comment the code. But hey, see how your text tops begin at the same height in all the browsers now? Bonus. Only way to do that.
Bug Alert
There's a special IE5/Win glitch that's not in IE5.5/Win and gave me some grey hair trying to figure it out. See the big text I'm using at the title "Box Lessons"? Every time I put that in, the middle box rose just a few pixels, sliding under the top box and ruining my aligned image. Turns out you have to keep all line-height to font-size ratios the same, or this bug appears. So to get the words close together again I used a negative value in the first word's bottom-margin.
This Page
... has uneven text tops. I couldn't help myself. I wanted to try something fancy to keep my interest while I debugged the code. And the gif is three pieces set as background images in three boxes to force me to get it right down to the pixel. They're background images so the text can flow over them, and so simple browsers that can't read the CSS won't know they're there. Oh, and everything else is text, even the nice big title. Pixel consistent across browsers and you don't have to make a gif.
There's more detail about building this page over at the autopsy.
Update 07-Mar-01: Eric Costello is grouping attempts at 3 column CSS over here. Right on.
Just over two weeks ago, Jeffrey Zeldman and the Web Standards Project announced the beginning of writing web pages that are everything they were always meant to be.
"If you think about it, there are two ways to create standards-compliant sites.
"The safe, conservative way follows the letter of web standards by avoiding validation errors. But it falls short of the spirit of web standards by continuing to bind style to content in chains of iron. For instance, the WaSP's site has always been standards-compliant, and has always used CSS to control its typography. But the layout is done with HTML tables so the site will work in any desktop browser.
"The benefit: what I just said—it works in any browser. The drawbacks: (1.) changing the design means hand-editing thousands of individual table cell colors, heights, and widths, or crafting new table layouts; (2.) these HTML layout techniques are meaningless to non-traditional browsers and are considered harmful by the W3C, even if the pages validate.
"And then there is the second way, the Holy Grail of web standards: separating style from content, using structural markup for data, and CSS for all aspects of visual layout control. I'd been using CSS since 1997, but had never cranked the volume to 11. Now, with help from my friends, I would do just that..."
