View Full Version : Image too tall for heading in Firefox and overlaps onto div below

07-11-2008, 08:34 PM
I've got an image floated to the right of a heading which is taller than the text it is placed next to. In IE7 it looks how I want it too look with the heading area seeming to stretch down with the image, but in Firefox 3 the image overlaps onto the div below.

The example here:


How can I get it to behave as it does in IE?

All the HTML and CSS is in the page source.


Pepe, the bull
07-11-2008, 09:00 PM
I believe floated items should not stretch the div they are in. They're like floating over it. (That's how it works in my head.) You could put a div after the pic and clear the float.

<div id="maincontent">

<h2><img src="page2.php_files/me3&#37;2520400.JPG" id="richard" alt="Richard">Get in contact with rgtest at <b class="rsd">rgtest</b> in any of the following ways:</h2>
<div style="clear:both;">&nbsp;</div>


07-11-2008, 09:17 PM

That's worked, so I'll stick with that and remember your way of thinking about it. Just wondering if that's a fully accepted way of doing it and are there other ways?

07-12-2008, 12:55 AM
Read this for more info on the proper way to clear floats. http://positioniseverything.net/easyclearing.html

Why are you using so much absolute positioning? Most of it if not all of it is uneeded. Use floats, margins and/or paddings to get things where they want. Don't abuse absolute positioning.