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 2 of 2

Thread: Overlap

  1. #1
    New Coder
    Join Date
    Nov 2005
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Overlap

    Using the code below the links navigation bar doesn't follow the header in Firefox, it overlaps it. Any ideas on how to solve this?

    <style text="text/css">
    body { padding:0; margin:0; }
    #header {clear:both;width:100%;
    }
    </style>
    <body>
    <div id="header">
    <div style="float:left; width:50%;">
    <a href="index.php"><img src="/images/Logo.gif" border="0" alt="logo" /></a>
    </div>
    <div style="float:right; width:50%;">
    <img src="/images/468x60.gif" border="0" alt="banner" />
    </div>
    </div>
    <div style="border:1px solid #CCCCCC;text-align:center;width:100%;padding:0;margin:0;"> Links Navigation to go here</div>

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Floats, collapsing container

    Because the "header" div only contains floated elements, it collapses, leaving the navigation div to move up under the content it precedes it.

    To force the header to encompass the two floats, either include a little non-floated and cleared element after the two floated divs, or float the "header" div itself; this "magically" causes it to encompass the floated content.
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

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