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).
In a previous post, I mentioned using ordered lists to display block-level code snippets. The solution worked, but had disadvantages, most notably the inefficiency during initially getting the code on the site. So I decided to revisit displaying block-level code snippets, with a solution that accomplished the following goals:
- Efficiency during initial writing / copy & paste
- Extensibility
- Cross-browser compatibility
- Minimal footprint
- Usability (line numbers, ability to copy & paste, etc.)
Eventually you’ll need to include superscripted text in your site text, and when you do you’ll find that the HTML standard provides a special tag specifically for that purpose. Everything contained in a <sup> tag will be interpreted as superscripted text by browsers, and will be displayed as such. However, you’ll find that the default style for the tag leaves a little to be desired. Specifically, use of the tag will alter the surrounding line height as the superscript text is rendered above the other text on the line.
Update (7/23/2008): See a more efficient solution for code display.
If you are working on a web-related website and/or blog, you’ll inevitably need to display code snippets on your pages. And when you do for the first time, you’ll have some questions:
- How do I show code snippets without the browser rendering typical tags?
- How should I show code inline, both semantically and stylistically?
- How should I show larger, block level code snippets?
