If all of the misuses of divs have been eliminated by the previous article, what are divs used for?

“div” stands for “logical division”. A div contains multiple elements that you want to treat as a group. An example would be a “news” column for a website. Let’s say we have the following markup:

<h3>Recent News</h3>
<dl>
	<dt>27 November, 2009
		<dd>Here is some news…<a href=more.html>read more</a>
	<dt>18 November, 2009
		<dd>Here is some more news…<a href=more.html>read more</a>
	<dt>1 October, 2009
		<dd>Here is even more news…<a href=more.html>read more</a>
</dl>

Now, what if we want to wrap a box around all of that, to give us the ability to treat both the definition list and the <h3> as a single unit? There’s no other semantically appropriate tag, so we’ll use <div>:

<div id="news">
<h3>Recent News</h3>
	<dl>
		<dt>27 November, 2009
			<dd>Here is some news…<a href=more.html>read more</a>
		<dt>18 November, 2009
			<dd>Here is some more news…<a href=more.html>read more</a>
		<dt>1 October, 2009
			<dd>Here is even more news…<a href=more.html>read more</a>
	</dl>
</div>

(Note that a <div> is typically given an id value as it usually has a style that is different from other elements on the page… but class can work equally well in some cases.)

Using CSS we can do anything to this <div> that we would do to any other element. Let’s first place a border on it:

div#news {
	border: 1px solid black;
}

With a border present you should be able to see that <div> is a block tag that extends all the way across the screen by default. Let’s place a specific width on this div:

div#news {
	border: 1px solid black;
	width: 15em;
}

Let’s now customize the appearance of the h3 inside the <div>. We will use a descendant selector to avoid influencing the appearance of h3 elements in other contexts:

div#news h3 {
	color: #fff;
	background: #000;
	text-align: centre;
}

Note that the text that we have used in the definition terms touches the left edge of our <div> box. The obvious solution is to pad the <div>:

div#news {
	border: 1px solid black;
	width: 12em;
	padding: 1em;
}

Note that doing so extends the overall width of the <div>. By definition width is defined as the the width of content, not the box. Overall width could thus be calculated as:

width (when specified) + padding (left and right) + border (left and right) + outline (left and right) + margin (left and right) = overall width

This can be countermanding by using a different box-sizing model, but we will leave that be for now.

While this added padding does push content away from the border of our div box, what if we want to make the <h3> a solid tab at the top of the box? In that case, we remove the padding from the div, and instead place it as margin on the left and right of the definition list (padding would work equally well in this case):

div#news dl {
	margin: 0 1em;
}

(Note the order used: values for top and bottom are set at the same time in the first number, left and right in the second number).

That solves that problem; now there’s just the gap above the <h3> to deal with:

div#news h3 {
	color: #fff;
	background: #000;
	text-align: centre;
	margin-top: 0;
}

We can do to this <div> anything we have done to other elements: float and wrap text around it, put a background image and/or color in it, etc.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.