Quote:
| Originally Posted by tomchadwin Glide: I agree with your first point, but this would be a choice for the end-user. Re: the caption issue you mention, that is not quite the problem. If I omit the width declaration, the caption wraps one word to a line. Not sure why that is.
Your alternative layout is fine, but I am simply not too fond of it. I like a constant line length, and no odd text block shapes. |
Those pesky end-users, eh? Life would be much simpler without them
The reason you get the quirky behaviour when you omit the width is twofold as far as I can see. (
http://www.w3.org/TR/CSS2/visudet.html)
First. You have the span absolutely positioned inside an element that has been 'positioned' itself (relative). The edges of the containing box for the absolutely positioned element are supposed to be derived from the ancestor. You've overwritten the top and left values, but it's still picking up the bottom and right edges from the edges of either those <p>'s or the line box of the text depending on which CSS regards as the ancestor (i'm not sure which). Either way the right edge is now actually on the other side of the left edge, i presume containing boxes can't have negative widths so it's set to zero. So your img and text now wrap immediately.
If you take the 'position: relative;' off the <p>'s this should correct this, as the absolutely positioned element now establishes its edges from the next ancestor which is positioned anything other than 'static', or the root element, in this case the <body> i think.
Second. If you do remove the 'position: relative', IE being IE doesn't seem to behave how the CSS specs would suggest and goes its own way. Mozilla based browsers seem to work well though. To get around this IE awkwardness it seems you have to set a width on the .imageCol after all.
So now you have the problem of what width to set it at. If you know all the images are going to be a certain size that's easy. However, if you have end users I guess you'll need a more generic solution.
Personally, i'd set it at a width as wide as I could comfortably fit in my expected page width. You then get the problem of the caption text appearing to the right of the image. To get around this i'd make all images inside the .imageCol spans into block level elements which will automatically force the text below it. Image captions should now wrap nicely before the page's edge at whatever width you set, while images will ignore the width and be as big as they need to be... provided you don't set the overflow property to hidden on the spans of course.
So the styles i'd end up with in your example page is...
Code:
.main {
width: 30em;
margin-top: 0em;
margin-bottom: 1em;
}
.imageCol {
position: absolute;
left: 32em;
width: 200px;
}
.imageCol img {
display: block;
}
Dev Shed Forums Sponsor:
February 25th, 2004, 04:46 AM
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
