Hello,
I am trying to enclose an img tag in a <div> or <span> wrapper; and I want the
wrapper to resize automatically to the image size (i.e., I don't want to
specify a hard-coded size). Using float:left or float:right, this works. But
how do I manage it without a float?
For instance:
1. This works:
<span class="pic-left"><img src="url/to/img"><br />some caption</span>
CSS:
.pic-left {
border: 1px solid #d3d3d3;
padding: 5px;
text-align: center;
font: 700 0.7em/1.3em arial, sans-serif;
float: left;
}
The image and caption sit nicely in the center of the border; the border is
just 5px larger than the image; and there is only one border around both the
image AND the caption under it.
2. This doesn't work:
<span class="pic-alt"><img src="url/to/img"><br />some caption</span>
CSS:
.pic-left {
border: 1px solid #d3d3d3;
padding: 5px;
text-align: center;
font: 700 0.7em/1.3em arial, sans-serif;
}
In the second case, the image doesn't sit nicely centered in border frame; and
the <span> tag creates a separate border around the image AND the caption
beneath.
3. Using a <div> tag instead of the <span> tag in the second example creates
a border that goes right across the parent container (body or parent <div>).
All I want is to put the image, with its border and caption on a separate line,
with a border just 5px larger than the image. Any help would be much, much
appreciated.
Gautam Patel
-------------------------------------------
email : [EMAIL PROTECTED]
[EMAIL PROTECTED]
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
