willerich.com

this is a short post about a handful of CSS you can find pretty much everywhere on the web, yet I’m surprised how little it’s used. This website uses it, but I decided to publish a more isolated example. So what you see is a basic blog layout, that will expand between 800 and 1024 or so pixels. That makes it nicely flexible to be used with small screens, or, what I read more and more, for users with big cinema displays that don’t maximise their windows any more, as they have lots of screen real estate, and like to show that off by working in multiple windows sitting parallel next to each other.
So, let’s get down and dirty:

Here’s the example page in stage 1. The little floating boxes in the lower bit are added for entertainment value. It’s a very straight forward thing to do in Mozilla / Firefox:

• Center a content block with margin: 0 auto 0 auto;
• give it a minimum width
• give it a maximum width
• set up the primary and sidebar area width as percentage, giving each of them as much space as you please, so they add up to a maximum of 100%.
• float the two areas left and right respectively. They are interchangeable, all you need to remember is that your content order stays the same.

It’s not that easy for Internet Explorer 6, though, but luckily expressions come to a rescue

• min width and max width are ignored by IE6. Great.
• set up the width of your content block with expressions, like so:
  width: expression(document.body.clientWidth < 752 ? “750px”:(document.body.clientWidth > 976 ? “974px”:”auto”));
• and you’re done. See it at work in the example stage 2.

There is an alternative of giving the sidebar a pixel width and positioning it absolutely over the primary content, which should get an equal width’s margin on the side you want the sidebar on. Don’t add a a width, you know. Margin and width for one container, that’s for the next generation of web developers that have never heard of a broken box model implementation. This will leave you with complete pixel control and a floating width for the primary content area only. Find the variation here in example stage 3.

I’ve tested this scenario in Firefox 1.5.0.6 and IE 6 on Windows XP SP2.

Tags: accessibility, css, wordpress

This entry was posted on Thursday, September 7th, 2006 at 5:30 pm and is filed under lab. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.