Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image too tall for heading in Firefox and overlaps onto div below

    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:

    http://rgtest.awardspace.com/page2.php

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

    All the HTML and CSS is in the page source.

    Thanks

  • #2
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    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.

    Code:
    		<div id="maincontent">
    			<h1>Contact</h1>
    	
    			<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>
    	
    		</div>
    Pepe, the bull

  • #3
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks

    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?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •