SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    canada
    Posts
    331
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    outer div is colllapsing

    I have a navigation div (nav) that spans the width of the page.

    I want to put the actual navigation in another div (nav_inner) and have it centered.

    Both will have the same color so it looks like the navigation is centered in the bar.

    But the outer bar is collapsing so I cannot have a solid color across.

    <div id="nav">
    <div id="nav_inner">

    <div id="nav_main">
    <ul>
    <li id="current"><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>
    <li><a href="#">Button 4</a></li>
    <li><a href="#">Button 5</a></li>
    </ul>
    </div>

    </div>
    </div>


    #nav {
    width: 100%;
    background-color: red;
    border: 1px solid blue;
    clear: both;
    }


    #nav_inner {
    margin: 0 auto;
    width: 800px;
    background: green;
    clear: both;
    }

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Too many divs ! You should be able to set the width and auto side margins on the <ul> itself, and dispense with the #nav_main and #nav_inner divs completely.

    If the <li>s are being floated, then the <ul> height will collapse to zero unless it has a height specified, or has its internal floats cleared. If the <ul> then has no height, neither will #nav_main, #nav_inner or #nav. Need to see the full css pertaining to all elements of the menu to assertain if this is the case.


Bookmarks

Posting Permissions

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