CSS code:
#wrapper {margin:auto; width:100%;}
.container {display: table; width:100%;}
.row {display: table-row;}
.cell {display: table-cell; height: 100px;}
#left {width:150px;}
#right {border: 1px solid red;}
HTML code:
<div id="wrapper">
<div class="container">
<div class="row">
<div class="cell" id="left">this is fixed width</div>
<div class="cell" id="right">this is not fixed width</div>
</div>
</div>
</div>
Can you find anything bad in that layout?
If the width of the wrapper changes to be fixed, the layout is still okay. Well, I wanted to make things work without CSS tables, but can't figure out how.
First: What are you trying to do? If you want a two-column structure you can do this much more easily. You're using 4 layers of divs before you even have a chance of laying down content. Delete the wrapper, container, and row. Just make body a display:table.
<!DOCTYPE html>
<title>Test</title>
<style>
body {
display: table;
width: 100%;
}
body > div {
display: table-cell;
height: 100px;
}
#left {
width: 150px;
}
#right {
border: 1px solid red;
}
</style>
<div id=left>fixed width</div>
<div id=right>not fixed width</div>
Bam, done, without lots of extraneous bullshit divs that you'll have to keep track of. Got a header or footer? Then you'll need a container, unfortunately (for now, there's no way to do rowspans or colspans in the CSS table model). Wrap up the columns in a container, make it display:table instead, then put your header and footer before or after the container as normal. While you're at it, use the HTML5 elements, something like this (and yes, this is a perfectly valid html5 page):
<!DOCTYPE html>
<head>
<title>Test</title>
<style>
header,section,article,nav,aside {
display: block;
}
header {
border: 1px solid blue;
}
body > section {
display: table;
width: 100%;
}
body > section > * {
display: table-cell;
}
#left {
width: 150px;
}
body > section > article {
border: 1px solid red;
}
</style>
</head>
<header>Header!</header>
<section>
<div id=left>fixed width - maybe I have a <nav> or <aside> inside of me</div>
<article>main stuff - not fixed width</article>
</section>
Just include a little html5 shim for IE in a conditional comment (google for it, they're simple as hell), and you're golden.
And what's wrong with the CSS table model? If you're afraid because of all the stern advice not to use layout tables, rest easy my friend. There was never anything wrong with wanting a site that laid out its contents on a grid. Layout tables were bad because the <table> element carries semantic meaning with it (basically, "I contain tabular data organized in rows and columns!"), and using it purely as a display device made a mockery of this (and made life very hard for users of screenreaders). The CSS properties, on the other hand, are pure display devices without any semantic meaning of their own, so they can be applied to your markup without fear, and without fouling up the semantics.
Really, it should be called something like the "CSS Flexible Grid Layout Module", but calling it "Table" instead made it easy to understand how to use it.