4 replies [Last post]
bjbj
Offline
newbie
Last seen: 6 years 1 week ago
Joined: 2005-10-26
Posts: 9
Points: 0

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.

http://www.seton.net.au/testing/default.cfm

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 48 weeks 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

&lt;hr /&gt; 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?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

bjbj
Offline
newbie
Last seen: 6 years 1 week ago
Joined: 2005-10-26
Posts: 9
Points: 0

&lt;hr /&gt; 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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 48 weeks 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

&lt;hr /&gt; 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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 6 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9149
Points: 3133

&lt;hr /&gt; 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

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.