Okay, I can admit, I'm not as good with CSS as I would like to be. That said, I am better at it than some of my co-workers, and have recently introduced one of the hardcore, let's use tables for layout, designers to the joys of clean CSS. I love the things, but I don't always think in them, and I stayed with tables as a layout medium for years after CSS layouts were popularized.

Of course, now I am an ecstatic CSS-man, happily building my layouts with CSS styles, exulting in that glorious dearth of nested tables.

Beautiful!

Of course, since I'm still learning this stuff, there are problems I'll stumble across. The problem today was liquid templates with a fixed-width left column.

Here's a not-so-secret, I don't like fixed-width templates.

I usually keep my resolutions up high. Higher than most folks out there. As such, standard 800 wide fixed-width templates will only take up at best a half of my screen. The ones designed for 640 are just pathetic.

So, I prefer to build everything using liquid templates. Not that bad, and everything, and one of the reasons I stayed on the tables as layout medium bandwagon for as long as I did.

The problems with liquid layouts that I faced lied in the fact that template I was using needed to be a mixture of fixed and liquid widths. I needed a hardcoded 200 pixel left-navigation, and the rest of the real estate needed to be taken up by content.

Then I also needed such things as a minimum height on the content. Otherwise, the footer would have sneak its way up beneath the navigation. Which is just bad form, all around.

So, I spent a bit of time doing some research, and much to my non-surprise, I wasn't the first to have these problems.

The height thing, was solved by a nifty CSS command called min-height. I provide a minimum height which I want this to have, and if the content does not require enough space to meet that minimum height, then it fills it with white space. Beautiful! Perfect! It works in IE 7! There's even a min-width.

I'm happy as that proverbial clam.

So, I spent a bit more time in Google, searching and hunting. Dipping my nose into those dark and arcane realms of cyberspace which are best left to us geeks: forums for programmers. Well, actually it was a programming blog-but it is still arcane.

Seriously, I discovered an answer to my ails in the form of this blog entry: A List Apart: In Search of the Holy Grail.

And no, contrary to the fact that there is a new Indiana Jones movie coming out, this has nothing to do with Indiana Jones. Or Percival.

Anyways, that blog entry details using negative margins to force pages around.

Which annoyed me, and didn't really work.

But I managed to fiddle with the code there, and discovered the secret CSS settings needed to perform my desired behavior!

{style>
html, body{height:100%; width:100%; min-width: 640px;}
body {
background-color:#F7F7F7;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-size:1.0em;
text-align:center;
font-family:Verdana,Tahoma,Arial,sans-serif;
}
#MainRegion{Padding-left:200px; min-width:600px;}
#ContentArea{float:left; width:100%}
#menuArea{position:absolute; width:190px; top:154px; left:0px;}
{/style>
{div id="MainRegion">
{div id="menuArea">{/div>
{div id="ContentArea">{/div>
{/div>

Okay... Blogger is a great CMS for most things, but it annoys me when I try to post code samples like this. I need to see if I can find a CODE SAMPLE widget for this blog. Anyways, the example above provided me what I needed, and behaved properly!