I finally got around to creating a WordPress theme, which was necessary because of some usability concerns I had with the previous theme. One of the major improvements I made was to implement what I call a “semi-fluid layout”, or one that scales to the size of your browser within pre-determined dimensions. In standards-compliant browsers, the page will now scale from 728 pixels to 900 pixels. I needed to declare a minimum width because at extremely small widths the content can break in unforeseen ways, and a maximum width because anything larger than 900 pixels made the main content column so wide it become difficult to read (shorter columns = better usability).
The new layout for the content needs five divs:
<div id="pageContainer">
<div id="page">
<div id="contentWrapper">
<div id="mainContent">
</div>
<div id="secondaryContent">
</div>
</div>
</div>
</div>
Because of an IE bug we can’t center a <div> of specified width without wrapping it another <div>, hence the pageContainer:
#pageContainer {
text-align: center;
}
Since we set the text alignment to center, we need to set it back in the page <div>, along with setting the minimum and maximum widths:
#page {
margin: 0 auto;
text-align: left;
min-width: 728px;
max-width: 900px;
}
Of course everything below IE 7 doesn’t support minimum and maximum widths, so I decided to specify a set width for those browsers:
<!--[if lt IE 7]>
<style type="text/css">
#page {
width: 760px;
}
</style>
<![endif]-->
I also added a wrapper for the main and secondary content, so that I had a <div> that knows the height of the taller section:
#contentWrapper {
float: left;
}
Then it’s just a matter of sizing and floating the content blocks:
#mainContent {
float: left;
width: 66%;
}
#secondaryContent {
float: right;
width: 21%;
}
If you go this route, just make sure everything else on your page is defined relatively (in percentages, ems, etc.) as well. For instance, you’ll have to make the padding of the content divs a percentage (which you’ll also have to override in early IE).
