The div is quite possibly the most important element for a CSS based design. What then, is a div? Simply, a <div> is nothing
more than a box. Pretty anticlimactic isn't it? Ok, so if it nothing more than a box, how do we use it to create a web page?
Web design is undergoing a shift in design methodology, from the old method of creating a table-based layout filled with markup describing how to present data, to a div-based design, clearly defining what the content is, breaking content into logical sections, and removing presentation markup. Let's first look at clearly identifying what content is, and later we will move into divs. Look at the below examples, and ask yourself which one makes more sense.
All the world's a stage,
And all the men and women merely players.
They have their exits and their entrances;
And one man in his time plays many parts...
<p style='margin-left: 40px;'>
All the world's a stage,<br />
And all the men and women merely players.<br />
They have their exits and their entrances;<br />
And one man in his time plays many parts...<br />
</p>
<span style='font-style:italic;'>William Shakespeare, "As You Like It", Act 2 scene 7</span>
All the world's a stage,William Shakespeare, "As You Like It", Act 2 scene 7
And all the men and women merely players.
They have their exits and their entrances;
And one man in his time plays many parts...
<blockquote>
All the world's a stage,<br />
And all the men and women merely players.<br />
They have their exits and their entrances;<br />
And one man in his time plays many parts...<br />
</blockquote>
<cite>William Shakespeare, "As You Like It", Act 2 scene 7</cite>
Even from this relatively simple example, you can see the difference. When looking at the markup based HTML example, it is difficult to tell what the content being presented is. There is no logical way to determine that the passage is a citation just by looking at the code, and we have to define all the attributes of each element as well, declaring a left margin on the passage, and making the citation italic.
In the descriptive HTML example, it is easy to see that we
are quoting Shakespeare, and citing him as well. Also, you can see that certain elements, such as <blockquote> and
<cite> have predefined attributes as well, relating to their purpose, thus the indentation of the passage and the
italics of the citation.
So what does descriptive HTML have to do with divs? Like descriptive HTML, clearly defined divs help to logically show what each section of a web page is and its purpose. For instance, a header, menu, content, and copyright information. Let's take a look at a longer example to visualize this.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla sit amet sapien. Sed ligula odio, ullamcorper ultrices, rhoncus non, porttitor eget, pede. Nulla fringilla faucibus sem. Sed vel dolor sit amet arcu posuere tempus. Etiam ultricies tellus sit amet mi. Nullam vehicula. In sit amet ipsum et ipsum adipiscing scelerisque. In lobortis, nunc quis molestie rutrum, velit tellus vestibulum leo, et dignissim sapien sem a arcu. Aliquam tempus ipsum sed mi. Suspendisse tempor nonummy est. Etiam odio wisi, tincidunt id, iaculis a, feugiat a, eros. Duis metus nulla, auctor sed, mattis sed, hendrerit nec, ipsum. Duis ipsum dui, vehicula sit amet, pellentesque varius, blandit non, odio.
Donec sem. Nullam id eros. Nulla et pede. Mauris hendrerit. Maecenas massa. Suspendisse urna odio, luctus suscipit, bibendum eu, gravida in, eros. Curabitur scelerisque ultrices lorem. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer luctus rutrum leo. Integer wisi ipsum, accumsan eu, dictum ac, aliquam vel, urna. Nullam tellus. Integer sagittis nisl a diam. Donec non eros id ante posuere imperdiet. Nunc nec lorem id turpis gravida volutpat. Vestibulum nec urna et eros ullamcorper egestas.
<div id='overall'>
<div id='header'>
This is a page title.
</div>
<div id='menu'>
<ul>
<li><a href='#'>Link 1</a></li>
<li><a href='#'>Link 2</a></li>
<li><a href='#'>Link 3</a></li>
<li><a href='#'>Link 4</a></li>
</ul>
</div>
<div id='content'>
<p>text omitted</p>
<p>text omitted</p>
</div>
<div id='copyright'>
Copyright ©2003 John Doe
</div>
</div>
#overall {width: 80%; border: 1px solid #000000; margin: 5px auto;}
#header {height: 40px; clear: both; border-bottom: 1px solid #000000;}
#menu {width: 20%; float: left;}
#content {width: 75%;float: right;}
#copyright {border-top: 1px solid #000; text-align:center; clear:both;}
If you are checking the actual code for the 'web page' presented in the example, you will notice that the code used to generate the 'page' you see at the top of the example and the HTML code shown are not the same. This is only because of what is needed to generate an example on a web page that is already in a templating system. The HTML code presented and the CSS together will produce the result above, trust us.
Look at the HTML code above. Can you identify what each section is, and does it make logical sense? Just by looking at the code, can you get a feel for where each group of content would be positioned on a page? Look now at the CSS code. Though you may not understand all of it yet, you can tell just by looking that all data on how to present the content visually is contained here, rather than mixed in with the content of the page. This combination provides for a clear division between content and presentation, making it easy not only for search engines to index your content, but also for you to maintain it, reducing the chance for errors and allowing for easy updates.
Now that we've learned a little about divs and their importance, let's continue our discussion by talking about the Box Model.