Clearing An Image/div?

[mboehler3]

Hi my page is here:http://www.healthnutsradio.com/xcart_description.htmlI have two floating elements: a div with border at the very top, and an image half way down the page.I want both of these elements to float and not overlap the headline description ("What is Adrenal Response™ Complete Care?" and "Adrenal Exhaustion - The Challenge"). Right now, they both overlap the headlines, and does not look clean.Please advise, thank you very much.

[chibineku]

Hiya. You can try this:Change the style of the #words div to the following, and add one called #img:

#words{font-family: Arial;font-size: 12pt; color:#000000;width:auto;align:left;min-height:300px;}#img {float:right;width:auto;align:right;min-height:300px;}

And then the arrangement later should look like:

<div id="img"><img src="http://www.healthnutsradio.com/main-images/product_images/stress.gif"></div><div id="words"><ol><li>The Adrenals</li><li>Stress Response</li><li>Antioxidant Support</li><li>The Pancreas</li><li>The Nervous System</li><li>Membrane Stabilization</li><li>Oxidative Stress</li><li>The Urinary System - Kidney Chi</li></ol></div>

This gives you plenty space around the images. You can adjust the space by changing the min-height attributes. It would be worth assigning unique div ids for each word div that contains images, because it makes any other #words divs the same height... Hiccup: it only works in FF, for the moment. Can anyone complete this partial fix?Sorry, I'm fairly new to this stuff and I thought I'd cracked it...

[chibineku]

D'oh! It's so much easier than that:add:clear:both;to the #highlight style delcaration, and an option margin, such as 0 0 10 0px, to the #words img declaration.