How to layout a page using CSS

I will show you here how to make the layout of a page using CSS. This is sometimes called making a layout without tables or a "table-less" layout. This example will concentrate on illustrating the point of how to convert an existing layout made using tables, such as the one that can be found in the HTML Tables section of this site, into a pure CSS layout. In this article, we will take it and convert it to CSS.

Our starting point will be a template given to us as an image. I have already drawn on this image green lines to separate the zones that are to compose our page. Here is the image so marked.

Template with zones

As you can see, I have separated on the image four zones that I named: header, menu, content, and footer. Each zone will have a different background image, and all these images will have a border that must be not overlaid. The target browser window will have a width of 768 pixels.

The header will be given a height of 135 pixels, and the footer, of 72 pixels. The center will have not a fixed height, but a fixed width: the first column will be 169 pixels wide, and the second, 599 pixels wide. The header will be filled with a background image of 768 by 135 pixels. The header text ("My Holidays") will be written in Tahoma font of 14 pts.

The content gets a width of 575 pixels to prevent the text from bumping against the window border and will be formed by a text describing the Alps and a picture showing a mountain thereof.

The footer has two sub-parts that need different alignments. The first part will receive a text, "Happy journeying!", with left alignment. The second part will contain a mail-to link with right alignment.

Here is the page with tables.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<html>
<head>
<title>Page Layout with Tables</title>
<link rel="stylesheet" href="tablayout.css">
</head>
<body>
<table class="mainTable" align="center" width="768"
border="0" cellpadding="0" cellspacing="0">
    <tr><!-- header -->
        <td class="topTD" colspan="2">My
        Holidays</td>
    </tr>

    <tr>
      <td class="menuTD" width="169"
      valign="top"><!-- menu -->
          <table cellspacing="0" cellpadding="0"
          width="140">
          <tr>
          <td valign="top"><div
          class="mainMenu"><a href="#">Home
          Page</a></div></td>
          </tr>

          <tr>
          <td valign="top"><div
          class="mainMenu"><a href="#">The
          Alps</a></div></td>
          </tr>

          <tr>
          <td valign="top"><div
          class="mainMenu"><a href="#">The
          Caribbean</a></div></td>
          </tr>

          <tr>
          <td valign="top"><div
          class="mainMenu"><a href="#">The Aegean
          islands</a></div></td>
          </tr>
        </table>
      </td>

      <td class="contentTD" width="599"
      valign="top"><!-- content -->
          <table class="contentTable" border="0"
          cellpadding="0" cellspacing="0" width= "575"
          summary="">
              <tr>
                <td valign="top">
                  <div class="content">
                  <H1>The Alps</H1>
                  <p>
                  The Alps is a large mountain system in
                  south-central Europe. Scenic
                  beauty and winter sports make them a
                  popular tourist attraction. Lakes
                  and mountains are a beautiful combination.
                  <p>
                  <img src="alps_1.jpg" width="200"
                  height="150" alt="A lake
                  in front of the mountain" border="0"
                  align="">
                  </div>
            </td>
          </tr>
        </table>
    </td>
    </tr>

    <tr align="center" valign="top"><!-- footer
    -->
      <td class="bottomTD" height="72" colspan="2">
        <table width="95%" border="0" cellspacing="0"
        cellpadding="0">
          <tr>
            <td class="footer" align="left">Happy
            journeying!</td>
            <td class="footer" align="right"><a
            class="footer" href="mailto:john@brownish.com
            "><img src="email.gif" width="17"
            height="14" alt="My e-mail" border="0"
            align="">john@brownish.com</a></td&g
            t;
          </tr>
        </table>
      </td>
    </tr>
</table>
</body>
</html>

We begin by replacing every "table", "tr", and "td" tag for a "div" tag. We proceed then to introduce all table attributes into the corresponding class or identity selector of the CSS style-sheet. The attributes "width", "border", and "cellpadding" are converted to the corresponding attributes of the class. "Cellpadding" is only partially equivalent; "align" and "cellspacing" have no equivalents, except when "align" refers to some text. Here is an example.

<table class="mainTable" align="center" width="768"
border="0" cellpadding="0" cellspacing="0">

.mainDiv {
  width: 768;
  border: none;
  padding: 0;
}

We will need to delete some unnecessary "divs" that do not introduce any modification in the layout or the presentation. We may also need to give name to some anonymous "div" (that is, a "div" that has not a class associated with it), so as to give an attribute to it. I chose to create them as identities because they are unique cases. For example, the "leftMenu" identity was created.

The attributes of "tr" and "td" tags must also be moved to the corresponding style-sheet class, if it exists, or to a newly created one.

After accomplishing the previous steps, the mechanical part of the job is finished. Now, we must confront the inherent differences between the two models: CSS and tables. First thing we must do is to lower the site name, "My Holidays". Tables by default center the text vertically. We create an identity and position it 50 pixels from the top.

#siteName {
  position: absolute; 
  top: 50px;
}

We take out all "height" attributes with a value of 100% as they are now useless. So that the menu and the content are side by side, the value "left" must be given to the "float" property of the menu, and the content must receive a left margin of 169 pixels.

Table cells occupy all the table's height, but this is not so with "divs". To make the menu background image to repeat until the bottom, we must give a name to the center part and move to it the background image.

#center {
  background-image: url(images/bg_menu.gif);
  background-position: top left;
  background-repeat: repeat-y;
}  
.menuTD {
  width: 169px;
  float: left;
}

Every HTML element (for example, "h1" and "p") has a default margin that can interfere with the layout, so we must make zero these margins and make the room we need using padding.

Now, to the footer: it needs a special treatment. I retained a class, "bottomTD", to put the background image and the height. Then I created an identity with the font details (size and color), and some padding left and right. I further specified that any link within this box should be white and bear no underline. I then went on creating two classes, one for the left text with "float:left" and one for the right text with right alignment.

Here is the resulting style-sheet.

/* --- Elements --- */
BODY {
  margin: 0;
  padding: 0;
  background: url(images/bg.gif) no-repeat;
}
H1 {
  font: 14pt Tahoma; 
  color:#000000; 
  margin: 0;
  padding: 3px;
}
a {
  text-decoration: none;
  color: #000000;
}
p {
  margin: 0;
  padding: 3px;
}

/* --- Main and header --- */
.mainDiv {
  width: 768;
  border: none;
  padding: 0;
}
.topTD {
  background-image: url(images/top.jpg);
  font:18pt Verdana;
  color:#FFFFFF; 
  text-align:left;
  font-weight: bold;
  height: 135px;
  padding-left: 30px;
}
#siteName {
  position: absolute; 
  top: 50px;
}

/* --- Center --- */
#center {
  background-image: url(images/bg_menu.gif);
  background-position: top left;
  background-repeat: repeat-y;
}  
.menuTD {
  width: 169px;
  float: left;
}
#leftMenu {
  padding: 0;
  width: 140px;
}
.mainMenu {
  margin: 10 0 0 20;
  cursor: pointer; 
  width: 120px;
  padding: 3px; 
  font: 8pt Verdana; 
  color: #000000; 
  text-align: left; 
  border: 1px solid #7A7A7A;
}
.contentTD {
  background-image: url(images/bg_content.gif);
  width: 599px;
  margin: 0 0 0 169px;
}
.contentDiv {
  border: 0;
  padding: 0;
  width: 575;
}
.content {
  font:9pt Verdana; 
  color:#000000;
}

/* --- Footer --- */
.bottomTD {
  background-image: url(images/bottom.gif);
  height: 72px;
}
#footerRow {
  font: 8pt Arial; 
  color: #FFFFFF;
  border: 0;
  padding: 20 30 0 30;
}
#footerRow a {
  color: #FFFFFF;
  text-decoration: none; 
}
.footer-left {
  float: left;
}
.footer-right {
  text-align: right;
}

To see the coding of the page, press the following link and then choose "View source" or press "Ctrl-U".

Layout with CSS

Previous | Contents | Next



	\| HOME \| FEEDBACK \| BOOKMARK \| Build your Website © 1999-2008 Hector Castro -- All rights reserved

If your doubt is not answered in this site, please use the
contact form .
I'll answer as soon as posible.

I can help you using instant messaging. To schedule a meeting, please use the
meeting form.

You will find the late news about the free programs offered here on my blog
Free Webmaster Tools

You can get news about updates to my free programs through this
RSS feed.