Skip Site Navigation «

Absolute Viewport

vnav«labs«CSS«layout

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:

#left { visibility: hidden; position: absolute; top: 50px; width: 10em; /* elastic: ^+ pushes right */ bottom: 34px; left: 0; border-top: 1px solid #000; padding: 12px 1em 0; background: #eed; overflow: auto; }

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]   home

(c) 2008-2010, Douglas W. Clifton, loadaveragezero.com, all rights reserved.