When the CSS revolution came, it was declared: no more tables! Use divs with style!

Well, that’s nice and all, since tables lead so often to nesting tag hell, but few of the revolutionists left behind explicit instructions to normal folks as to how to do this.

Most of us are only concerned with having borders, so we clubbed content over the head with the overkill table because there was no other way. Thankfully, CSS has made our lives easier in this respect. So we’ll cover borders and padding, and how to use them for:

• Simple quote boxes
• Image photo edges
• Images side by side

And of course we’ll also cover the more advanced topic of completely replacing tables with divs.

Contents

Borders and Padding
Recipe: Simple Quote Boxes
Recipe: Image Photo Edges
Recipe: Images Side by Side
Advanced Topic: Replacing Tables

Borders and Padding

<div> is quite fun to play with. As discussed previously, they act as boxes that can contain all sorts of content, from text to images and YouTube embeds. They can be floated to the left or the right, and have other content wrap around them.

Sometimes, you’ll want to distinguish these boxes from the rest of the text by more than just background color, but also by borders (such as I regularly do with my examples). But no discussion about borders can go without talk of padding, for the same reason that no discussion about text-wrapping can go without margins. It’s just ugly to see text jutted up against other objects.

border: my favorite way to declare them is by this single command, since you almost always need three things: thickness, style (like solid versus dotted), and color. You can specify all three at once this way.

The most common styles include: solid (bar none), dotted, dashed, and groove. More values are here at this handy CSS reference site.

padding: like margin, you can also declare padding around all sides this way, from the top and clockwise-round.

Often you’ll want padding (or margins) to have the same size, so you can just declare one number here.

Here’s a typical example box I use:

And here’s the code for it:

<div style="border:1px solid gray;margin:1ex;padding:1ex;">
"Another time, Lizzy," said her mother, "I would not dance with <i>him</i>, if I were you."

"I believe, ma'am, I may safely promise you <i>never</i> to dance with him."
</div>

ex is simply the height of an x character in the current font. It’s a handy shortcut, when you’re lazy and don’t need a very exact width/length/thickness, and often looks decent.

back to contents

Simple Quote Boxes

Here’s a short little recipe that also demonstrates border-left (there’s also border-top et al). You often see quotes on web pages or mail clients denoted by a bar at the left, of varying thicknesses.

It looks like this:

“But if a woman is partial to a man, and does not endeavour to conceal it, he must find it out.”

Here’s the code:

<blockquote style="border-left:4px solid orange;padding-left:1ex;">
"But if a woman is partial to a man, and does not endeavour to conceal it, he must find it out."
</blockquote>

Here’s a slightly more fancier style, which I created while using the best HTML color reference in the world:

“Mr. Darcy is all politeness,” said Elizabeth, smiling.

“He is, indeed; but, considering the inducement, my dear Miss Eliza, we cannot wonder at his complaisance–for who would object to such a partner?”

<blockquote style="border:1px dotted orange;border-left:4px solid orange;background-color:#FFFFBF;">
"Mr. Darcy is all politeness," said Elizabeth, smiling.

"He is, indeed; but, considering the inducement, my dear Miss Eliza, we cannot wonder at his complaisance--for who would object to such a partner?"
</blockquote>

Notice that the second border-left overrides the first border, because it comes second. That’s like painting a wall pink, and then painting it over again with blue; CSS attributes are evaluated top to bottom, left to right.

back to contents

Image Photo Edges

Often images by themselves look plain without a border of some kind. Like <div>, an <img> can be given a border using the same style attributes, and even padding.

However, you may want something fancier than simple border: 1px solid black;. How about a little border that looks like a white photo edge?

Here’s the code (without the centering; just the image):

<img style="border:1px solid gray;background-color:white;padding:3px;" src="https://spontaneousderivation.files.wordpress.com/2008/03/2005_pride_and_prejudice_030.jpg" />

Yup, the edge is produced by background-color, which goes behind the image and can only be seen when you additionally use padding. Weird world, eh?

back to contents

Images Side by Side

Suppose you have two images you want to show side by side, set off by themselves.

Here’s the code, which works for two images 180px wide and assumes you have a blog text area that’s wide enough to hole them both, plus a little more space for margins:

<div style="width:400px;text-align:center;font-style:italic;font-size:.75em;line-height:1.2em;margin:auto;padding:0;">
<img style="float:left;margin:5px;" src="http://farm2.static.flickr.com/1300/1047631314_78d7ff6967_m.jpg" width="180" /><img style="float:left;margin:5px;" src="http://farm1.static.flickr.com/3/4596895_52a0f3546d_m.jpg" width="180" />
</div>
<div style="width:100%;text-align:center;clear:both;font-size:.75em;font-style:italic;">
Photography: <a href="http://flickr.com/photos/valzpicz/archives/date-posted/2007/08/07/">lav.val</a> and <a href="http://flickr.com/photos/fictures/archives/date-posted/2005/02/10/">fictures</a>
</div>

Important note: if you don’t want a caption, you’ll still need to have that last div (just delete the content in it, or replace it with <div style="width:100%;clear:both;"></div>). The second div is necessary so that the text or other content coming afterwards doesn’t just up against the side-by-sides. Crazy but true.

Here’s how to calculate how wide the outer div needs to be, given a margin of 5 pixels around each image:

width-of-image-1 + width-of-image-2 + 20

Very simple.

The next part, replacing tables with divs, is not so simple. You may want to stop here or jump down to the comments.

back to contents

Replacing Tables

Arguably the pièce de résistance of this article. Not exactly something for the weak of heart, however. I only bothered to learn this bit because I needed to work with blog layouts (which is easier with divs than with tables) and figure out how to lay images side by side for my blather about my new Christmas tree… which I haven’t taken down yet….

Here is a brief set of requirements you’ll need, so that you can do some playing of your own after the recipes:

• You will always need width to get divs to arrange themselves into rows.
• If you don’t have just a single image, you will need height, because otherwise floating divs don’t get a height, and your div content will overspill. Always ugly.
• And even if you do just have a single image, you may still need to specify height to get things “just right”.
• You probably will always want either padding or margin to separate the divs from each other, often both.
• When calculating width and height, account for padding/margin/borders of your inner and outer divs.

On with the motley.

Here’s a simple recipe for a table with four cells, stacked 2 by 2.

<div style="width:164px;height:164px;margin:auto;padding:0;">

<div style="float:left;width:75px;height:75px;border:1px solid black;margin:2px;padding:0;">
<img alt="tetris" src="http://farm1.static.flickr.com/58/166940675_2a265dc8d5_s.jpg" style="border:0;margin:0;padding:0;" />
</div>
<div style="float:left;width:75px;height:75px;border:1px solid black;margin:2px;padding:0;">
<img alt="shamrocks" src="http://farm1.static.flickr.com/49/113563800_d930764e54_s.jpg" style="border:0;margin:0;padding:0;" />
</div>
<div style="float:left;width:75px;height:75px;border:1px solid black;margin:2px;padding:0;">
<img alt="google" src="http://farm1.static.flickr.com/6/8182590_98f030bc01_s.jpg" style="border:0;margin:0;padding:0;" />
</div>
<div style="float:left;width:75px;height:75px;border:1px solid black;margin:2px;padding:0;">
<img alt="misc" src="http://farm1.static.flickr.com/18/88048432_10e8d819d7_s.jpg" style="border:0;margin:0;padding:0;" />
</div>

</div>
<div style="width:100%;clear:both;"></div>

(The margin: auto centered the outer div.)

But wait! It’s quite easy to obtain the divs all in a row, or all in a column. Just change the width and height of your outer div.

An outer div that starts with <div style=”width:324px;height:81px;margin:auto;”>:

An outer div that starts with <div style=”width:81px;height:324px;margin:auto;”>:

You can probably start to see how I created the stack of book images in Writing on the Stage that’s floating to the right (leave off the <div style="width:100%;clear:both;"></div> and add margins and a float to the outer div).

And you can probably also see how you can start playing with widths, to produce tables with a wide cell on top, and multiple small ones below.

<div style="width:246px;height:208px;text-align:center;margin:auto;">

<div style="float:left;width:240px;height:121px;border:1px solid black;margin:2px;padding:0;">
<img alt="misfortune" src="http://farm1.static.flickr.com/42/110381788_5eafbb4d9c_m.jpg" style="border:0;margin:0;padding:0;" />
</div>
<div style="float:left;width:75px;height:75px;border:1px solid black;margin:2px;padding:0;">
<img alt="tetris" src="http://farm1.static.flickr.com/58/166940675_2a265dc8d5_s.jpg" style="border:0;margin:0;padding:0;" />
</div>
<div style="float:left;width:75px;height:75px;border:1px solid black;margin:2px;padding:0;">
<img alt="shamrocks" src="http://farm1.static.flickr.com/49/113563800_d930764e54_s.jpg" style="border:0;margin:0;padding:0;" />
</div>
<div style="float:left;width:75px;height:75px;border:1px solid black;margin:2px;padding:0;">
<img alt="google" src="http://farm1.static.flickr.com/6/8182590_98f030bc01_s.jpg" style="border:0;margin:0;padding:0;" />
</div>

</div>
<div style="width:100%;clear:both;"></div>

All that height/width stuff is annoying, isn’t it? Sometimes you can get away without it, but usually only for images—and you can usually never get away from the height of the outer div.

Calculating the width or height is more or less:

outer-div-padding * 2 + outer-div-border-width * 2
  + inner-div-padding * (number-of-divs-in-row + 2)
  + inner-div-margin * (number-of-divs-in-row + 2)
  + inner-div-border-width * (number-of-divs-in-row * 2)

When to use divs and when to use tables

Use divs when you have very few cells of content, or a requirement for floating flexibility. This is why divs-for-tables is primarily used for website layouts or for placing a couple boxes of content next to each other.

Otherwise, just use tables. Sometimes stuff is just tabular, you know?

back to contents

The Floor is Open

For questions, concerns, complaints, love, tomatoes, etc.

By the way, I think Pride and Prejudice is the only romance I’ve ever liked. And now… I need to go buy a paper copy to read in bed, because I am Kindle-less.