This article was written in 2009. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

Using position:absolute to avoid inline styles

A few weeks ago I upgraded an old Pivot weblog to the latest version of WordPress, a weblog system which is a bit more flexible, I think. One of the things I dislike though is some of the HTML that comes out of it’s core functions. For example an image with a caption.

The known problem with an image with a caption below it is that it is impossible to make the text as wide as the image without setting the width of the image on the caption.

<div class="image-with-caption">
 <img src="image.jpg" alt="">
 <p>This is a caption below an image and the caption ignores the width of the image.</p>
</div>

The above code will look something like this:

---------------------------
|                         |
|                         |
|                         |
|                         |
|                         |
|                         |
|                         |
|                         |
---------------------------
This is a caption below an image and the caption ignores the width of the image.

But we want it to look like this:

---------------------------
|                         |
|                         |
|                         |
|                         |
|                         |
|                         |
|                         |
|                         |
---------------------------
This is a caption below an 
image and the caption  is 
as wide as the image.

This can be done by adding inline styles to the surrounding div (or to the caption itself).

<div class="image-with-caption" width="270px">
 <img src="image.jpg" alt="">
 <p>This is a caption below an image and the caption is as wide as the image.</p>
</div>

I don’t like inline styles. So there must be another way to set the width of the caption. Hello position:absolute!

.image-with-caption {
	float: left; /* we want this */
	position: relative; /* we need this */
}

.image-with-caption img {
	display: block; /* we don't need this but it solves things */
}

.image-with-caption p {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0; /* this will make it as wide as the image */
}

The above CSS will render our HTML as follows:

---------------------------
|                         |
|                         |
|                         |
|                         |
|                         |
|The caption is now placed|
|over the image, aligning |
|at the bottom            |
---------------------------

You can now decide to only show the caption when hovering over the image. Or you could add a margin below the image of two or three times the default line-height in order to fit the text below the image.

I know, I know, it is not the same as a flexible caption (flexible in height) below an image, and I sure know it can well result in unreadable and unaccessible text when the caption is very long (or the image is very small). And the photographer won’t be happy with text over his image and the copywriter won;t like his caption to be hidden. I just don’t like inline styles. And I love the power of position:absolute

P.S. Yes, I know there is a browser out there called IE6. If you understood what I wrote you can make up a fix. If you didn’t don’t use position:absolute.

Nerd.