Slight change to your syntax and containing/clearing your float
s:
#navcontainer {
width: 900px;
margin: 0 auto;
border-bottom: solid 1px #000;
overflow: hidden;
}
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;
}
Solution
Slight change to your syntax and containing/clearing your float
s:
#navcontainer {
width: 900px;
margin: 0 auto;
border-bottom: solid 1px #000;
overflow: hidden;
}
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/