«
Absolute Viewport
The page layout at loadaverageZero exploits absolute
positioning on the outer container [#canvas] which allows me to offset all
four sides from the inside edges of the viewport. In DOM parlance this is also
known as the <html> element. As long as the header and footer are
known heights they can be fixed in position at the top
and bottom of the canvas. Using a little offset math I can then calculate and display
the contained #left [vertical navigation menus] and right #content
boxes using absolute distances from the top, left and bottom of the canvas —
maintaining background colors at full height regardless of the possible lack of content
in them, or resort to stacking repeat-y image tiles.
The left menu area is not sitting in a wide margin-left of this content box.
Neither container is floated. I can in fact turn off any single element in the design
and you'll see the power of absolute positioning. Except of course the canvas itself,
in which case the rest of the design would collapse like a house of cards. Actually
that's not true, what you would be left with is the opportunity to reflect on
dragonflys.
If you're savvy and are running FF/Moz with the Web Developer Extension installed you can see this in action yourself. Let's see...you appear to viewing this page with:
Default Browser version running on .
With these tools in place you can click on the CSS
menu from the toolbar and select Edit CSS or press
Ctrl+Shift+E
to bring up the edit window in the sidebar. Now scroll down until you find the
#left ID selector rule and insert the
declaration shown in red:
Magic! The left menu container disappears and has no effect on the rest of the
layout. There is no clipping going on, no clear: both; or any need
to use z-indexes.
Grab a browser resize corner and drag it around to see the effect. Try it full screen or maximized. This satisfies one of my design goals when I started the project — that it should be liquid.
Since distances are [almost] all specified in terms of ems, the
layout also scales nicely with different font families and sizes. To see this in
action — and assuming your browser supports it — bump the font-size
up and down a few notches and watch what happens. On my machine I can start from
impossible to read up to IN YOUR FACE without breaking the layout
[at least ten settings depending on resolution]. This site includes several
alternate stylesheets if you'd like to try switching between font families. And
another goal is met — that the design should be elastic.
Browsers
Current versions of FF, NS and Opera all work very well except for a few minor glitches that I won't go into because my brain hurts. I am told Safari on Mac and Konqueror under Linux and other Unix flavors also work well. Any Mozilla browser based on the Gecko rendering engine has outstanding support for CSS and other web standards technologies.
Sigh. Then there's Microsoft's IE — the bane of all Web designers and programmers/developers the world over. The happy news is that it now works. I may have a few gray hairs over it, but it works. And it's beyond the scope of my patience to explain how I got it to work. I will say kudos to Alex at fu2k.org for the idea that culminated in an effective solution.
Note: This site is served as and written in valid XHTML 1.1 and CSS 2.1+. Unless of course you happen to be using IE when you run the validators. But then IE is not standards compliant so who cares? And you shouldn't be running it anyway. Or perhaps you happen to like rampant worms, viruses and spyware crawling all over your hard disk.
But Wait!
I'm such a trickster I've gone and trickst myself. Since only IE sees the evil stylesheet you can indeed run the validators from that browser and get correct results. But let's be good boys and girls and avoid using it except for checking our work. Maybe Santa will bring us real standards for the holidays. Or next year, or the year after that...
Didn’t find what you were looking for? Try searching drx for many other helpful CSS resources.
Last updated: Monday, October 20th, 2008 @ 4:00 PM EDT [2008-10-20T20:00:17Z]
