Introductory Div-Based Design

Table of Contents

Why Divs and Not Tables?

This is a heated point of discussion in various online communities, but there are several reasons that I use div-based design rather than table-based design.

  • It is recommended by the W3C, the people who created the World Wide Web.
  • It is more accessible to those who use screen readers.
  • Consistent use of CSS in the layout of a site reduces loading speeds and redundant code.
  • It degrades better on mobile devices.

Really, though, the most obvious reason I use divs over tables is that tables were intended to hold table data, not to house the structure of a webpage.

What Is This Tutorial About?

This tutorial is a basic introduction to tableless webpage layouts that are valid XHTML and CSS and don't use CSS positioning.

Why Not Use CSS Positioning?

There are perfectly valid uses for using CSS positioning, but most of the time it can and should be avoided. The main reason for this is that webpages that have several positioned elements are generally not very scalable and require more code to achieve the same effects as a more fluid layout.

What Is a Div?

<div> is what is known as a block-level element. Basically, a block-level element is a structural element. Here are some common examples:

  • Paragraphs (<p>)
  • Table Elements (<table>, <tr>, <th>, <td>, <thead>, <tbody>, <tfoot>, <col>, <colgroup>, <caption>).
  • Form Elements (<form>, <input>, <select>, <option>, <textarea>, <fieldset>)
  • Complete List External Link

The difference between <div> and other block-level elements is that the div was not explicitly designed to be anything but a section. This made the div a natural choice for the W3C to use as an alternative to tables in the structure of a webpage.

How Do I Start?

There are several basic things that will make div-based design fantastically easier once you know them.

  • Size. By default, a div has a width of 100%, and it gets its height from whatever is inside it. However, you can give it any width or height you desire by using the following CSS elements (known as rules):
CSS:
#mydiv {
   width: 400px;
   height: 100px;
}
XHTML:
<div id="mydiv">&nbsp;</div>
  • Basic LayoutFloating. Say, for example, you want to create a simple two-column layout with a header on top and a footer on the bottom (as shown in the image to the right).

    This image shows a menu div that nicely stays to the left with the text on the right. This would be accomplished by floating the menu div to the left.

    There are two values to the CSS rule float – left and right (sorry, no center). If the menu is floated to the left, but was not as tall as the text on the right, the text would wrap around the bottom of the menu div, because If two objects float the same direction, they will generally be placed side-by-side.

    The code for the above image, assuming that the header and footer stretch all the way across the page and that the menu is 200px wide, would be similar to the following (I'll clarify later):
CSS:
#header {
   height: 100px;
   background-color: #333;
   color: #fff;
}
#menu {
   float: left;
   width: 200px;
   background-color: #666;
   color: #fff;
}
#footer {
   height: 100px;
   background-color: #333;
   color: #fff;
}
XHTML:
<div id="header">Header</div>
<div id="menu">Menu</div>
   (Main text)
<div id="footer">Footer</div>
  • Clearing. The preceding code may not work all of the time, because there is no guarantee that the #footer will go underneath the #menu if the main text is not long enough. This is what clearing is for. The clear CSS rule forces a div (or any other block-level element, for that matter) to fall completely below something that's floated. You can choose whether you want to pass beneath things that are floated to the left, things that are floated to the right, or both. Since the menu is floated to the left, we'll make sure the footer clears it.
CSS:
#footer {
   clear: left;
   height: 100px;
   background-color: #333;
   color: #fff;
}

That's it! With those three techniques, you can create a very basic div-based template.

Going Beyond

Of course, even the simplest of layouts needs a bit of tweaking. Say, for example, that we didn't want our layout to stretch 100% across the screen. The easiest way to do this is to place everything inside a containing div and give that div a width.

CSS:
#container {
   width: 700px;
}
#header {
   height: 100px;
   background-color: #333;
   color: #fff;
}
#menu {
   float: left;
   width: 200px;
   background-color: #666;
   color: #fff;
}
#footer {
   clear: left;
   height: 100px;
   background-color: #333;
   color: #fff;
}
XHTML:
<div id="container">
   <div id="header">Header</div>
   <div id="menu">Menu</div>
      (Main text)
   <div id="footer">Footer</div>
</div>

Now, suppose we wanted to center the entire webpage. We can use margins to do this. A margin is the space around an object.

The margin rule follows many other CSS rules in that it takes the following syntaxes:

  • margin: 1px;
    (all sides have a margin of 1px)
  • margin: 1px 5px;
    (top and bottom have margins of 1px; left and right have margins of 5px)
  • margin: 1px 5px 4px 3px;
    (top has 1px margin; right has 5px; bottom has 4px; left has 3px)

Because we want to center our #container, we'll give it the following style:

CSS:
#container {
   width: 700px;
   margin: 0 auto;
}

Voilà – instant div-based webpage template. Enjoy yourself!