Once upon a time, there was a very good Web browser and a very bad Web browser. The very good Web browser liked to spend its time skipping through servers and trying on new pages. "Look how pretty these pages look on me!" it would exclaim, and indeed they did look very pretty. The very bad Web browser, on the other hand, liked to skulk through the same servers and mangle any nice pages it found. "These pages don't deserve to look good," it grumbled, for it was indeed a naughty browser. No matter how designers might plead, they couldn't get the very bad Web browser to stop hurting the pages they had made. only if they went to a lot of effort to make pages especially for the very bad Web browser would it try them on, instead of mangling them. "Well, if you insist," it would sniffle.
So: which browser did you assume was the good browser, and which the bad? It probably depends on how you learned Web design, how long you've been at it, and your stance on a few scattered design theory issues. I'm not going to say what I think, since this was more of a verbal Rorscharch test than a right-or-wrong quiz. Hope you enjoyed it!
Anyway, this page has been created using two "main" div elements, two "punch" div elements that contain no text or other content, and a few paragraphs to contain the actual text. The top right corner is one punchout, and the second one's coming up in just a little bit. The "punch" div elements are the only ones that were floated.
The "main" div elements are regular old normal-flow divs. They're joined together using the same technique that allows our floats to punch out sections. In this case, the second "main" div has a margin-top value of -1px. That's just enough to pull the second "main" div upward to overlap the border of the first "main" div, and thus make them appear to be a single, irregularly shaped element. It's a cheat, but a simple and useful one.
Although IE5.x/Win doesn't size the "main" div elements correctly, it nonetheless creates its own fairly interesting effect. You can, with a bit of work, get cross-browser layouts something like this one. All you have to do is not set width values, thus letting the browser make its own assumptions. If you get things just right-- and you don't try to create any punchouts-- you can get an irregularly-shaped layout that works in at least v5+ browsers. Good luck!
Jump to