Help With Floats/Clears

[jdubwelch]

This is what it looks like:

 

I want the <h4>Former IU Steeplechaser Goes Grom Zero to Hero</h4> to be below the picture.  When I add a clear:left attribute to the h4 element, it clears it, but all the way down past my "leftside" which is floating:left as well.

 

Is there any way around this?

 

You can see the html here:

http://www.athleticsconsulting.com/news-dynamic.php

 

You can see my css for it here:

http://www.athleticsconsulting.com/css/main.css

 

 

 

[bronzemonkey]

Your markup is not the best. Dump this at the bottom of your CSS file to see it in action; but note that some of this code is to reset values that you have in your stylesheet.

 

#content {float:left; width:500px}
#content p {width:auto;} /*removes fixed width from your paragraphs in content*/
.floater {float:left; width:200px; height:200px; background:#000;} /*this is the class i gave to an element to simulate your floated image*/
h4 {clear:left;}

 

You're going to have to fix the other problems or layout differences that are produced by this yourself. Your code means that the header and menu can be affected by attempts to alter the width or positioning of the content below.