Using DIV Elements for Formatting a Page

Floyd asked me to post an example showing some formatting on a <div> element. I built a test web page using the code from “Which to Use – div or span?” and some text borrowed from a recent ISU Extension News Release. Without any formatting, the page looked like this.

Unformatted DIV Example

By adding a couple of styles, it was easily changed this to look like this.

Formatted DIV Example

Remember that the <div> element had an id=”message” and the <span> tag had class=”date”. These hooks are used by the styles.

#message {
border:solid black 2px;
padding: 0px 10px;

#message .date {

This is just a very simple example that touches on what can be done by styling <div> and <span> elements. I recently worked on a web site using this technique, but can’t show it here because the site is password protected.

Using styles with <div> tags is one of the major factors that allow us to layout pages without the use of <table> tags. It takes a more <div> tags and styles than I wanted to show in this post, but can be fairly easy to accomplish. Let me know if you want to see more about how we do tableless layouts.

BTW – I’m a firm believer that <table> tags should only be used for tabular data, not for laying out web pages.


1 comment so far

  1. Floyd Davenport on


Comments are closed.

%d bloggers like this: