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.
By adding a couple of styles, it was easily changed this to look like this.
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.
Thanks…