CSS Layouts

Abstract

The Challenge: Replicate WebRef's front page using CSS. The Solution: CSS and lots of iterations.

 

Rogelio Lizaolo improves on Kwon Ekstrom's CSS version of WebRef's tabled home page. Months in the making, the final design successfully duplicates WebRef's layout without the use of tables. Numerous bugs were discovered in Netscape and Internet Explorer in how they handle CSS, and we found some elegant workarounds to these and other problems. What follows is a step by step CSS layout tutorial that shows how we got to the final design.

 

Introduction

 

In "Evolution of a Home Page" Andy King threw down the gauntlet, challenging readers to duplicate WebRef's tabled (and fabled) home page in CSS. Kwon Ekstrom came up with a solution, that worked in a number of browsers. After investigating his solution, I found a few problems with his design, and thought I'd try and improve on it. Andy, Kwon, and I went back and forth over a number of months tweaking and improving my design. What follows is a step-by-step account of my attempt to duplicate WebRef's table-like layout using CSS, while avoiding some of the bugs and problems found in other implementations.

  

The ultimate goal is to create a CSS layout that exactly resembles the WebReference.com layout made with tables and also behaves well with small window sizes and large fonts.

 

The target browsers are all the generation five and greater browsers, for both Windows and Macintosh platforms. We are also looking to use the same style rules for all of these browsers. This constraint makes the task more difficult and the final code larger and more complex than it would be for a browser with good compliance to CSS level 2, like Netscape 6. Thus, we cannot use those features that aren't supported for all browsers and sometimes the necessary workarounds to solve bugs or other problems yield a not so straightforward use of CSS.

 

 The Layout Challenge

 

The WebReference home page circa Spring 2001 has six big blocks that hold and organize the content (using three main tables to lay out the page):

• A top navigation bar with five text links and a search form.
• An advertisement block that holds a banner.
• A left navigation bar that holds the WebReference logo and text links.
• A right navigation bar that holds text links organized as the structure of the site.
• A main content area that holds the most recent articles and resources in the site.
• A colored box inside the main area that holds the "Tip of the day"

 Can this complex layout be replicated using only CSS? Yes indeed! Read on to find out how. Disregarding the top navigation bar, the advertisement block and the "Tip of the day" we have a three column layout. We can ensure that the middle column is going to be the one with more content, and therefore, the height of the document will be dictated by this block, and the three columns should be the same size vertically. Notice that there is a white gap that separates the left column from the main content area and another one that does the same for the right column. These separators have the same width (9 pixels) as the margins around the table to the edge of the browser window.