CSS : Page Layouts - [7] Introduction

One of the last frontiers in creating a truly CSS-enabled presentation is the layout. For a long time, web developers have been using HTML tables to create their layouts, often nesting tables to create multicolumn, multilevel layouts. Nested HTML tables render well in older browsers like Netscape Navigator 4 where CSS support, if present, is barely noticeable and is mostly wrong. If your audience uses an older browser and visual presentation is a key component of the site's success, you should consider using HTML tables.

However, if your audience uses a browser that supports CSS, you should use CSS to design your layouts. As a design language, CSS is focused on presentation, which includes helping web developers control the layout of their pages. HTML tables and other HTML elements, on the other hand, are tools you use to mark up content. The ideal is to have HTML represent the structure of the content at an intellectual abstract level and CSS say how to present it for a particular device.

Furthermore, with CSS you diminish file sizes and maintenance headaches. For example, by stripping away presentational markup and moving a design to CSS, you can reduce the file size of a web page tremendously. And once the design is in CSS syntax, creating site-wide changes becomes a snap.

This chapter discusses the many ways in which you can create column layouts—including simple one-column layouts, four-column layouts, and everything in between. It also explains how to start working with CSS if you still need to build a site using HTML tables and you want to use CSS just to help with the layout chores.

CSS : Page Layouts - [7.1] Developing Hybrid Layouts Using HTML Tables and CSS

Problem

You want to build a page layout that possesses the rigid structure of an HTML table while leveraging the ability to control its appearance through CSS.

Solution

Use one HTML table to control the layout of the entire page. Then, in each table row element, tr, insert an id attribute (see Figure 7-1):

<table width="600" cellspacing="0" align="center">

 <tr>

  <th colspan="5" id="header">

   <h1>Business Web Site</h1>

  </th>

 </tr>

 <tr id="navSite">

  <td width="120"><a href="/">Home</a></td>

  <td width="120"><a href="/products/">Products</a></td>

  <td width="120"><a href="/services/">Services</a></td>

  <td width="120"><a href="/aboutus/">About Us</a></td>

  <td width="122"><a href="/contact/">Contact</a></td>

 </tr>

 <tr id="content">

  <td colspan="3">

   <img src="dot_darkgrey.gif" width="300" height="200">

   <h2><a href="/products/">Epsum factorial non</a></h2>

    <p>Lorem ipsum dolor sit <a href="/products/">amet</a>,

consectetuer adipiscing elit. Li Europan lingues es membres del

sam familie. Lor separat existentie es un myth. Por scientie,

musica, sport etc., li tot Europa usa li sam 

vocabularium.</p>

    <p>Li lingues differe solmen in li grammatica, li 

pronunciation e li plu commun vocabules. Omnicos directe al 

desirabilitá de un nov lingua franca.</p>

  </td>

  <td colspan="2" >

   <img src="dot_darkgrey.gif" width="150" height="100">

   <h3><a href="/services/">deposit quid pro</a></h3>

   <p>Lorem ipsum <a href="/services/">dolor</a> sit amet, 

consectetuer adipiscing elit.</p>

   <img src="dot_darkgrey.gif" width="150" height="100">

   <h3><a href="/services/">sommun paroles</a></h3>

   <p>Lorem ipsum dolor sit amet, <a href="/services/">

consectetuer</a> adipiscing elit.</p>

  </td>

 </tr>

 <tr id="footer">

  <td colspan="5">

   Copyright 2003 Lorem ipsum dolor sit amet. 

  </td>

 </tr>

</table>

Figure 7-1. The default rendering of the table

Next, for table cells that act as page columns, insert id attributes for each column. For example, this Solution comprises two columns, a left and a right, which are marked with the values contentLeft and contentRight, respectively:

<table width="600" cellspacing="0" align="center">

 <tr>

  <th colspan="5" id="header">

   <h1>Business Web Site</h1></th>

 </tr>

 <tr id="navSite">

  <td width="120"><a href="/">Home</a></td>

  <td width="120"><a href="/products/">Products</a></td>

  <td width="120"><a href="/services/">Services</a></td>

  <td width="120"><a href="/aboutus/">About Us</a></td>

  <td width="122"><a href="/contact/">Contact</a></td>

 </tr>

 <tr>

  <td colspan="3" id="contentLeft">

   <img src="dot_darkgrey.gif" width="300" height="200">

   <h2><a href="/products/">Epsum factorial non</a></h2>

    <p>Lorem ipsum dolor sit <a href="/products/">amet</a>,

consectetuer adipiscing elit. Li Europan lingues es membres del

sam familie. Lor separat existentie es un myth. Por scientie,

musica, sport etc., li tot Europa usa li sam 

vocabularium.</p>

    <p>Li lingues differe solmen in li grammatica, li 

pronunciation e li plu commun vocabules. Omnicos directe al 

desirabilitá de un nov lingua franca.</p>

  </td>

CSS : Page Layouts - [7.2] Building a One-Column Layout

Problem

You want to build a layout that consists of one main column, as in Figure 7-3.

Figure 7-3. One-column page reinforced by increased margin

Solution

Apply a percentage value to the left and right margins of the web document's body element:

body {

 margin-left:15%;

 margin-right: 15%;

}

Discussion

When you apply a percentage value to the left and right margins of the body, the column width becomes flexible. This allows the content to stretch to the width of the user's browser.

To create a fixed-width column, use the width property for the body element:

body {

 width: 600px;

}

CSS : Page Layouts - [7.3] Building a Two-Column Layout

Problem

You want to create a two-column layout with columns that resize to the width of the browser, as in Figure 7-4.

Figure 7-4. Two-column layout achieved through CSS

Solution

First, mark up the content with div elements using the id attributes that contain appropriate values (see Figure 7-5).

Figure 7-5. The default rendering of the page

For demonstration purposes the values of the id attributes are used to show where the content is displayed when CSS is used. Semantic values would be preferred, like mainContent or sidebar, instead of using values that represent their placement on the page:

<div id="columnLeft">

 [...]

</div>

<div id="columnRight">

 [...]

</div>

<div id="footer">

 [...]

</div>

Then, in CSS, use the float property to move the contents of the left column to the left, and set a width that is two-thirds the web document's width:

#columnLeft {

 float: left;

 width: 67%;

 background:#fff;

 margin-top: 0;

 margin-right: 1.67em;

 border-right: 1px solid black;

 padding-top: 0;

 padding-right: 1em;

 padding-bottom: 20px;

}

CSS : Page Layouts - [7.4] Building a Two-Column Layout with Fixed-Width Columns

Problem

You want to create a two-column layout with fixed-width columns.

Solution

First, mark up the content with div elements using the id attributes that contain appropriate values representing their placement on the page (see Figure 7-8):

<div id="header">

 [...]

</div>

<div id="columnLeft">

 [...]

</div>

<div id="columnRight">

 [...]

</div>

<div id="footer">

 [...]

</div>

Figure 7-8. The default rendering of the page

Using the float property, set the width of the left column to a length unit rather than to percentages. Also, set the width of the entire document to a length unit (see Figure 7-9):

body {

 margin: 0;

 padding: 0;

 font-family: Georgia, Times, "Times New Roman", serif;

 color: black;

 width: 600px;

 border-right: 1px solid black;

}

#header {

 background-color: #666;

 border-bottom: 1px solid #333;

}

#columnLeft {

CSS : Page Layouts - [7.5] Creating a Flexible Multicolumn Layout with Floats

Problem

You want to create a three-column layout with columns that resize to the width of the browser, as shown in Figure 7-10.

Figure 7-10. Three-column layout achieved through CSS

Solution

First, mark up the content with div elements using the id attributes that contain appropriate values representing their placement on the page (see Figure 7-11):

<div id="header">

 [...]

</div>

<div id="columnLeft">

 [...]

</div>

<div id="columnMain">

 [...]

</div>

<div id="columnRight">

 [...]

</div>

<div id="footer">

 [...]

</div>

Figure 7-11. The default rendering of the page

Next, set each column to float to the left, making sure that the width is a percentage. All three values of the columns should equal 100% (see Figure 7-12):

#columnRight {

 width: 33%;

 float: left;

 background: white;

 padding-bottom: 1em;

}

#columnLeft {

 width: 20%;

 float:left;

 background: white;

 padding-bottom: 1em;

 text-align: justify;

}

#columnMain {

 width:47%;

 float:left;

 background: white;

 padding-bottom: 1em;

}

#footer {

 clear: both;

 padding-bottom: 1em;

 border-top: 1px solid #333;

 text-align: center;

}

Figure 7-12. An increased width for the main column forcing the right column to wrap underneath

Discussion

This technique works because all columns are set to float to the left and their widths aren't larger than 100%. Setting the floats to the right can flip the columns, but the result is the same.

Be sure to apply margins and padding to the elements within the columns (unless you account for their widths when sizing the columns). If you don't, the columns will expand beyond 100%, forcing one or more columns to wrap underneath each other, as shown in Figure 7-12.

CSS : Page Layouts - [7.6] Creating a Fixed-Width Multicolumn Layout with Floats

Problem

You want to create a three-column layout with fixed-width columns.

Solution

First, mark up the content with div elements using the id attributes that contain appropriate values representing their placement on the page (see Figure 7-13):

<div id="header">

 [...]

</div>

<div id="columnMain">

 [...]

</div>

<div id="columnLeft">

 [...]

</div>

<div id="columnRight">

 [...]

</div>

<div id="footer">

 [...]

</div>

Figure 7-13. The default rendering of the page

Next, wrap the div elements that compose the main and left columns in another div element and set the value of the id attribute to enclose. Also, wrap another div element around the entire set of div elements, setting the value to frame:

<div id="frame">

 <div id="header">

  [...]

 </div>

CSS : Page Layouts - [7.7] Creating a Flexible Multicolumn Layout with Positioning

Problem

You want to create a four-column layout with columns that resize to the width of the browser as shown in Figure 7-15.

Figure 7-15. Four-column layout with percentage-based widths

Solution

First, mark up the content with div elements using the id attributes that contain appropriate values representing their placement on the page (see Figure 7-16):

<div id="header">

 [...]

</div>

<div id="columnLeft">

 [...]

</div>

<div id="columnInnerLeft">

 [...]

</div>

 [...]

<div id="columnInnerRight">

  [...]

</div>

 [...]

<div id="columnRight">

 [...]

</div>

Figure 7-16. The default rendering of the content

Next, use the position property in each column, setting the value to absolute while setting the placement of the columns with the left and top properties:

#columnLeft {

 position: absolute;

 left:1%;

 width:20%;

 top: 4em;

 background:#fff;

}

CSS : Page Layouts - [7.8] Creating a Fixed-Width Multicolumn Layout with Positioning

Problem

You want to create a four-column layout with fixed-width columns.

Solution

First, mark up the content with div elements using the id attributes that contain appropriate values representing their placement on the page:

<div id="header">

 [...]

</div>

<div id="columnLeft">

 [...]

</div>

<div id="columnInnerLeft">

 [...]

</div>

 [...]

<div id="columnInnerRight">

  [...]

</div>

 [...]

<div id="columnRight">

 [...]

</div>

Next, use the position property in each column, setting the value to absolute while setting the placement of the columns with the left and top properties, making sure to use pixels for the units:

#columnLeft {

 position: absolute;

 left:5px;

 width:190px;

 top: 44px;

 background:#fff;

}

#columnInnerLeft {

 position: absolute;

 left: 205px;

 width: 190px;

 top: 44px;

 background: #fff;

 text-align: justify;

 border-width: 0;

}

#columnInnerRight {

 position: absolute;

 left: 405px;

 width: 190px;

 top: 44px;

 background: #fff;

}

#columnRight {

 position: absolute;

 left: 605px;

 width: 190px;

 top: 44px;

 background: #fff;

}

Discussion

Setting the width of the columns as well as the left and top properties to length units creates the fixed-width columns. This Solution is just as easy with two to three or more columns. Remember that anything more than four or five columns might be impractical.

CSS : Page Layouts - [7.9] Designing an Asymmetric Layout

Problem

You want to create a flexible, asymmetric or organic layout as seen in Figure 7-18.

Figure 7-18. The asymmetric placement of the content

Solution

First, mark up the content with div elements using the id attributes that contain appropriate values representing their placement on the page:

<div id="header">

 [...]

</div>

<div id="columnSmall">

 [...]

</div>

<div id="columnMain">

 [...]

</div>

<div id="columnMedium">

 [...]

</div>

Next, use the position property in each column, setting the value to absolute while setting the placement of the columns with the left and top properties using percentages. Also, use percentage values for positioning a background image (see Figure 7-19):

body {

 margin:5px 0 0 5px;

 background-image: url(flower5.jpg);

 background-position: 50% 35%;

 background-repeat: no-repeat;

 }