My job involves HTML-izing a lot of reports. Most of these start off as Word docs, and many contain images.
The images usually have a note below, like this:
[image here]
Figure 1: picture of a mouse
I want the page to look tidy, so I try to nest smaller images within the document and let the body text wrap around them. This is easy to do with a div, and I’m using this CSS:
.imgleft { float:left; padding:0px 10px 5px 0px }
(there’s also one to float the image right).
This works just fine, until I have a note for the image. Since the note text has no way of knowing how wide the image is, I have to use <br> tags to keep the text from pushing the div to the right and creating blank space. The only word-around is to assign a width to the div, but since all the images are a different width, that gets clunky.
I don’t know of any way to put a div around the image and not let the text push it wider. Does anyone else?
I can’t think of a way to do that with CSS, but you could do it with JS.
A CSS alternative might be to work out the likely minimum width of potential images, and then set that as a width or max-width for the caption. That will mean it won’t be as wide as some images, but does that matter?
Having the image wider than the text is fine. The only thing is that if we have a wider image, and a long string of text, it’ll grow vertically, and make whitespace that way.
[ s u p e r d u p e r w i d e i m a g e ]
figure 1:
this is a
super
wide
image.
I should just mandate an image width of like 40% of the content area width, then make everyone re-size their images
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!--
Widths in a table-cell are only a "suggestion".
-->
<head>
<title>template</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
body {
background-color:#bdf;
padding:0;
margin:0;
}
.canvas {
background-color:#fff;
width:740px;
overflow:hidden;
padding:10px;
margin:0 auto;
}
.edgeleft,
.edgeright {
display:table;
border:1px solid #888;
overflow:hidden;
}
.edgeleft {
clear:left;
float:left;
}
.edgeright {
clear:right;
float:right;
}
.tablecell {
display:table-cell;
width:1px;
}
img {
display:block;
background-color:#ccc;
}
</style>
</head>
<body>
<div class="canvas">
<div class="edgeleft">
<div class="tablecell">
<img src="img.jpg" alt="" width="300" height="200">
<p>This is the caption for this image. This is the caption for this image.</p>
</div>
</div>
<div class="edgeright">
<div class="tablecell">
<img src="img.jpg" alt="" width="400" height="200">
<p>This is the caption for this image. This is the caption for this image.</p>
</div>
</div>
<div class="edgeleft">
<div class="tablecell">
<img src="img.jpg" alt="" width="500" height="200">
<p>This is the caption for this image. This is the caption for this image.</p>
</div>
</div>
</div>
</body>
</html>
Nice example, ronpat. Gah, I must learn more about display: table. I keep forgetting about it. (It wasn’t really usable when I started out, so never crept into my field of view.)
They don’t have a choice. A lot of state and federal gov’t agencies (which are the majority of our audience) are strapped to IE7 (and in some cases IE6) for various reasons, including in-house apps that were designed to run on a specific browser. They won’t upgrade until they test every facet of operation, and when there’s a new version right around the corner, they often wait.
As such, our IE7 share is still around 20%. Heck, we just got upgraded from 6 just over a year ago.
It sounds like the desired effect can be achieved with html and css but “company rules” and technical restrictions prevent you from achieving it. Makes more sense than “lot of divs”.
Oh don’t get me wrong. Your solution works really well; I’m just trying to figure out how to make it work within our existing template (that already has a few too many nested divs) without having unexpected behavior inherited from what’s already there.
But the IE7 thing is a real pain. At least we don’t have to code for IE6 anymore.
Although I initially thought your reply, “a lot of divs”, was somewhat disingenuous, it also gave me good chuckle.
From the movie, “Amadeus”, came the line where Emperor Joseph II told Mozart that his composition of “The Marriage of Figaro” had “too many notes”. Your comment struck a funny chord, so to speak <still laughing>.
I understand the problem with nested tags and inheritance. It gnaws my ankle every now and then. <smile>
Don’t envy you having to support IE7. May I ask what level of government you support?
I’m Federal, but a lot of state and local (as well as other Federal) agencies view our site.
We’re using a template that a bunch of us created over the course of many months, and as time has worn on and we’ve gotten better with CSS, it’s clear that we did a lot of things with divs that we didn’t need to. Example:
But with around 50,000 pages using the new template, and a few thousand left to convert, fiddling with is is not a high priority, especially since any changes to the template would require changes to our CMS (because the CMS can create new pages with a click). Maybe once we get all the pages converted, I’ll look into cleaning up the CSS and “de-div’ing”.
Your solution was impressive though, and I’ve filed it away for the second I get the go-ahead to ditch IE7 support. But at the rate of gov’t, I might be retired first!
