Wed, 2005-10-26 04:55
I have a dynamic random product on my page layout. The text and image is brought in via cold fusion. The product changes each time the page is refreshed. Some products have taller images than others. I would like a <hr /> line to appear after THE BOTTOM of the image. At the moment it appears at the bottom of the text.
In IE, Firefox the <hr /> line will be cut short where the image appears but in netscape 7 the line will overlap the image (yuk). So How do i get the <hr> line at the bottom of the image on all browsers.
I tried <hr style="clear:left"; /> but in IE and Firefox this throws the remaining part of the document to the very bottom.
Hit refresh until you get a different product with a taller image too see what I mean.
Wed, 2005-10-26 05:08
#1
<hr /> line after floated left image
Why don't you put each of those different areas of content inside their own div and give the div a bottom border?
Wed, 2005-10-26 05:11
#2
<hr /> line after floated left image
Just getting my head around using CSS properly!
Do you think thats the best way to go about it? with DIV
Wed, 2005-10-26 05:26
#3
<hr /> line after floated left image
Actually, maybe not. There's no point adding more markup than is necessary. I'm not quite sure why you're getting different display in NS7 as I don't have a version here to test on.
One thing you should be doing though is putting more of your content in <p> tags. At the moment, all your content outside your h# tags is just floating free.
You might want to reconsider using some many h1 tags too. h1 tags are generally reserved for the most prominent title on the page with the other h# (h2, h3, h4 etc.) tags being used for smaller, more numerous titles.
Wed, 2005-10-26 08:51
#4
<hr /> line after floated left image
Yeah, the best bet is to wrap the block in a div. Make the div {overflow: hidden;}. That will cause it to enclose its child float. An <hr /> added at that point won't be messing with a float.
Why aren't the features in an <ul>?
cheers,
gary