Bookend Lists: Using CSS to Float a Masthead – replace tables with css layout list tutorial

A common visual element in many websites is to position two blocks of content on either end of a navigation bar. The left block of content typically displays global navigational tabs or drop-down menus. The right shows today’s date or perhaps a simplified search form. This article shows how to create a “bookend” look with elements on either end of a box using CSS-styled lists. This CSS-layout technique saves a significant amount of HTML code over table-based techniques. Tests with working code yielded savings in page size ranging from 30% overall to over 73% for the HTML code alone.

The Humble Masthead

The masthead or header of many sites imitates the main masthead of print-based publications. One or more masthead layers can display bookended content for that professional “newspaper” look. Not surprisingly, a number of news sites have adopted this left/right layout (see Figures 1 and 2). However, the sites tested use table-based layout techniques when list-based techniques could save 30% to 50% off of HTML file size. The amount of savings depends on how many similar bookend elements are used within the page.

The Boston Globe uses a bookend masthead (see Figure 1) with a conventional table-based layout. Table cells are used to align content left and right and take up 100% of the masthead (see code below):

    id="secnav_obituaries">Obituaries   
</div></td>
<td align="right"><div class="secNavLinks" style="padding-right: 10px;"><a
href="http://www.boston.com/news/traffic"
id="secnav_traffic">Traffic</a>  |  <a
href="http://www.boston.com/news/weather"
id="secnav_weather">Weather</a> </div>
</td>
</tr></table>

 

CNN.com uses a similar technique for their home page, with a compound bookend nav bar up top, created with tables (see Figure 2).

Bookend Lists Tutorial

A more efficient way to create bookend mastheads is to use CSS to morph XHTML structural elements to do your bidding. In this case we use descriptive lists (DL/DT/DD) and CSS to position one element on the left (DT), and the other on the right (DD). The first step is to create a header with an embedded list:

<div class="head">
<dl>
<dt>Left</dt>
<dd>Right</dd>
</dl>
</div>

 

The code above creates a labeled DIV that contains a one-item descriptive list. Next we use CSS to float the DT to the left, and align the DD text to the right.

dl {
margin: 0;
padding: 0;
width: 100%;
}
dt {
font-size:0.8em;
padding: 4px 11px 2px;
float: left;
}
dd {
font-size: 0.8em;
text-align: right;
padding: 4px 11px 0 0;
}

 

In the above CSS we zero out the margins and padding on our DL, and float the descriptive term (DT) left. With a 100% width DL we align the text to the right in the description and presto, a bookend list!

Adding Background Color and Rounded Corners

Next we’ll add a colored background and some rounded corners. The CSS that follows adds a background color and width to our container DIV and assigns background images to our positioned DL and DT:

.head {background:#aaeebb;width:300px;margin:0;padding:0;}
.head  dl {background: url(cornerr.gif) top right no-repeat;}
.head  dt {background: url(cornerl.gif) top left no-repeat;}

 

The above code gives us our bookended header (see Figure 3). Note that there is a way to save one HTTP request here by combining the two corners into one compound image and using CSS to position and clip. We’ll save that technique for a future speed tweak.

Adding Content

Next we add a box to hold some content, aligned below the header above.

.box {
width:300px;
border:1px solid #aaeebb;
margin:0 0 15px;
padding:10px;
font-size:0.8em;
}
h3{margin:0;padding:0;font-size:1.1em;}
p{padding:0;padding-top:10px;margin:0;}
...
<div class="box">
<h3>Bookend Lists Save Bytes</h3>
<p><i>Flash</i>: In a breaking news story...</p>
</div>

 

The DIV above creates a 300-pixel wide container for our content, complete with padding and border. IE and Firefox have a disagreement on their box models, however. Firefox interprets the W3C specification correctly and adds borders and padding to the box width, while IE simply adds padding and borders inside the 300px container with no change in width. This looks fine in IE, but we end up with a step in Firefox (see Figure 4):

Fixing Different Box Models

There are a couple ways to fix this behavior. One involves nested DIVs and applying styles selectively to each DIV. A more elegant solution is to make Firefox behave like IE by forcing its box sizing algorithm to emulate IE with the following proprietary code:

* {
-moz-box-sizing: border-box;
}

 

The CSS above uses the universal selector (asterisk or “*”) to force Firefox to behave like IE and add borders and padding to the inside of the DIV instead of the outside. The resulting header and box combination now aligns perfectly in IE and Firefox (see Figure 5).

One More Quirk

We found one more quirk in our bookend lists. In order to make the elements align vertically in Firefox we found it necessary to add a <br clear="left"> to the DD element.

<div class="head">
<dl><dt>Left</dt><dd>Right<br clear="left" /></dd></dl></div>

 

A CSS-based fix would be more efficient here, if anyone discovers one let me know.

Bookend Header with Tables

By way of comparison, the following code creates the same effect using tables (note that the code was tweaked to work with IE and Firefox, your mileage may vary):

.table {margin:0 0 15px;}
.table td{font-size:.8em;}
.table tr.head2 td.mid{background:#aaeebb;margin:0;padding:0;}
.table tr.head2 td p{padding:4px 0 2px;margin:0;}
...
<table width="300" cellpadding="0" cellspacing="0" border="0" class="table">
<tr class="head2"><td width="11" align="left" class="mid" valign="top">
<img src="cornerl.gif" width="11" height="15" alt=""></td>
<td align="left" width="48%" class="mid"><p>Left</p></td>
<td align="right" width="48%" class="mid"><p>Right</p></td>
<td align="right" width="11" class="mid" height="15" valign="top">
<img src="cornerr.gif" width="11" alt=""></td></tr>
<tr><td colspan="4" class="box">
<h3>Bookend Lists Save Bytes</h3>
<p><i>Flash</i>: In a breaking news story, bookended lists save bytes
over conventional tables. Film at 11, podcast at 10.</p>
</td></tr></table>

 

Note how inefficient this code is compared to the CSS and list-based code above. The content to markup ratio is much lower as well, which makes it more difficult to achieve high SEO rankings and speed. Eagle-eyed readers will note that the above table-based code could theoretically be improved using CSS more efficiently (contextual selectors rather than embedded classes). This would buy us a few bytes, if we could get the table cell height to behave across browsers.

Bookend Lists in Action

In real-world applications this technique would be used multiple times for bookend mastheads and repeated headers. One site that is using bookend lists to its advantage is my.netzero.net (see Figure 6).

Netzero uses bookend lists for multiple headers on their personalized start page (welcome, stock quotes, and weather headers). The more bookends you use, the more you’ll save with the power of CSS rules. Netzero uses tables for the content box to avoid the above box-model bug however, and could save even more switching to the above pure CSS technique.

<div class=tileHead><dl><dt>Welcome!</dt><dd>Friday, February 24, 2006<br clear=left /></dd></dl>
</div>
<div class=tile id=welcome><table width=313 cellpadding=0 cellspacing=0 border=0>
<tr><td><div id=welcomeContents><h3>Sign in to your myNetZero Personalized StartPage</h3>
...

 

Comparison of Table and CSS layout of Bookend Headers

To compare the two layout methods, let’s create a three-box test. In the example below, tables are used to create bookend headers and matching boxes on the left, while CSS is used to create bookend headers and boxes on the right (see Figure 7).

Figure 7: Table and CSS bookend header layout methods compared

Tables for bookend layout		DIVs and CSS Lists for Layout
Left Right Bookend Lists Save Bytes Flash: In a breaking news story, bookended lists save bytes over conventional tables. Film at 11, podcast at 10. Left2 Right2 Bookend Lists Save Bytes2 Flash: In a breaking news story, bookended lists save bytes over conventional tables. Film at 11, podcast at 10. Left3 Right3 Bookend Lists Save Bytes3 Flash: In a breaking news story, bookended lists save bytes over conventional tables. Film at 11, podcast at 10.		Left Right Bookend Lists Save Bytes Flash: In a breaking news story, bookended lists save bytes over conventional tables. Film at 11, podcast at 10. Left2 Right2 Bookend Lists Save Bytes2 Flash: In a breaking news story, bookended lists save bytes over conventional tables. Film at 11, podcast at 10. Left3 Right3 Bookend Lists Save Bytes3 Flash: In a breaking news story, bookended lists save bytes over conventional tables. Film at 11, podcast at 10.

The layouts appear identical in IE and Firefox, but the CSS version is significantly smaller. Table 1 shows the difference in code size. The HTML alone is 78.1% smaller using CSS bookend lists versus tables. HTML plus CSS (no content) is 42.1% smaller, while overall (HTML + CSS + content) the page is 32.4% smaller. The last two measures will improve as more bookend headers are added since the presentation is controlled by a single set of CSS rules, not embedded in each layout table.

Off Safari

Safari still has the step we mentioned above, however. The mozilla CSS hack we used to make Firefox behave like IE’s non-compliant box model doesn’t work in Safari. We fall back to the nested DIV solution, putting the padding and border on an interior DIV, with the width assigned to the exterior DIV of our content box like this.

.box2 {
width:300px;
margin:0 0 15px;
padding:0;
font-size:0.8em;
}
.box3 {
border:1px solid #aaeebb;
padding:10px;
}
...
BOOKEND HEADER GOES HERE
<div class="box2">
<div class="box3">
<h3>Bookend with Nested DIVs</h3>
<p><i>Flash</i>: In a breaking news story, bookended lists save bytes over conventional tables. Film at 11, podcast at 10.</p>
</div>
</div>

 

The nested DIV solution uses a bit more code, but works in Safari, IE, and Firefox. Table 2 shows the difference in code efficiency between tables and bookend headers and nested DIVs for the deck (content box).

Conclusion

With the advent of modern browsers CSS has come of age. With minor box-model workarounds you can use CSS to position list elements into a two-column layout to replace old table-layout methods. Savings ranged from 38.6% for HTML and CSS code alone, to over 73% for the HTML itself. Improving the content to markup ratio also helps to raise search engine visibility by getting your layout code out of the way of your content.

Further Reading

my.netzero.net

Netzero uses bookend lists on their customized start page.

Practical CSS Layout Tips, Tricks, & Techniques

This article shows how to use floats to replace two-column table layouts. Mark Newhouse includes an opposite end float example using DIVs. The code above uses descriptive lists instead of DIVs which is more efficient.