Question

For the life of me I can't see why my "div" will not wrap around the header... I've closed it, the height is not specified...

I've searched other posts and no solutions so far. Is there a conflict that I'm overlooking?

Here's the html:

<div id="navcontainer">
    <div id="siteLogo"> <a href="index.html"><img src="images/some image in a folder"/></a>        

    <div id="menu">
        <ul>
          <li><a href="index.html">Home</a></li>
            <li><a href="calendar.html">Calendar</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>
    </div>
 </div>

And the CSS:

#menu li a:hover { 
    color: #ff9900;
    border-bottom: 4px solid #ff9900;
}

#siteLogo img{
    height:auto;
    width: 220px;
}

#menu {
font-family: 'Comfortaa', Arial, Helvetica, sans-serif;
font-size: 16px;
color: #c0c0c0;
    }

#outer {
    width: 960px;
    margin:0 auto;
}

#wraper {
    width: 900px;
    margin:0 auto;
}

#navcontainer {
    width: 900px;
    margin: 0 auto;
    border-bottom: thick 1px #ffppoo;
}

#siteLogo {
    float: left;
    margin-top: auto;
}

#menu {
    float: right;
    margin-top: auto;
}

#menu ul li {
    display:inline;
}

#menu ul {
    margin-top: 50px;
    text-align: center;
}

#menu ul li a {
    padding:0 0 0 20px;
}
Was it helpful?

Solution

Slight change to your syntax and containing/clearing your floats:

#navcontainer {
  width: 900px;
  margin: 0 auto;
  border-bottom: solid 1px #000;
  overflow: hidden;
}

http://jsfiddle.net/xSfrb/

OTHER TIPS

The floats are probably killing you. Try adding one last

<div style="clear:both"></div> 

before closing the navContainer

The child elements are floating within a non-floating parent which causes the so-called zero-height container problem and has several solutions.

You can use overflow, like David Randall suggests

You can use an empty clear:both div, like Federico Jacobi suggests

Another solution is 'Clearfix', which uses pseudo content elements. See this related thread What is a clearfix? for further information on clearfix

EDIT: more background information on the problem http://complexspiral.com/publications/containing-floats/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top