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 {
width:185px;
float:right;
border:solid black 2px;
margin-left:10px;
padding: 0px 10px;
background:red;
}

#message .date {
font-weight:bold;
color:blue;
}

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.

Advertisements

1 comment so far

  1. Floyd Davenport on

    Thanks…


Comments are closed.

%d bloggers like this: