I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

A Simple div Example

html / elements

Estimated reading time: 3 minutes, 6 seconds

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>
<dt>27 November, 2009</dt>
<dd>Here is some news…<a href=more.html>read more</a></dd>
<dt>18 November, 2009</dt>
<dd>Here is some more news…<a href=more.html>read more</a></dd>
<dt>1 October, 2009</dt>
<dd>Here is even more news…<a href=more.html>read more</a></dd>

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>. I'll minimalize the HTML5 at the same time:

<div id=news>
<h3>Recent News</h3>
<dt>27 November, 2009
<dd>Here is some news…<a href=more.html>read more</a>
<dt>18 November, 2009</dt>
<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>

(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; }

Simple div example(Note: while setting width on elements is fine, setting height on non-image elements should be avoided. Elements automatically expand in height to accommodate content as it is added and removed. Setting a fixed (or even relative) height sets the value, and you will not be able to anticipate or adapt it to changing amounts of content, which will overflow / under fill the element.)

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. width in CSS is defined as the the width of content, not the box (except in IE6, which breaks this convention completely). 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

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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.