Jump to content

Clearing An Image/div?

Recommended Posts

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.

Link to post
Share on other sites

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...

Link to post
Share on other sites

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.

Edited by chibineku
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...