Can't get div to wrap around my header. Can anyone see why?

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;
}

Sometimes it helps to add borders on html elements so you can see the block layout. If you use firefox this browser plugin also might help https://addons.mozilla.org/en-US/firefox/addon/tilt/ — Jeremy Quinton, Feb 04 '14 at 15:56

score 0 · Accepted Answer · answered Feb 04 '14 at 15:51

0

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/

answered Feb 04 '14 at 15:51

David Randall

770
3
9

Bingo! got the div to encompass the menu. Thanks!... just one thing though, the navigation list still won't float: right any idea why? – Michael G Feb 04 '14 at 15:58
1

In your code you have `#menu` nested inside `#siteLogo` updated fiddle http://jsfiddle.net/xSfrb/10/ if you move it to be alongside `#menu` then it floats right - http://jsfiddle.net/raJj8/ – David Randall Feb 04 '14 at 16:12
Well duh. Ha! don't know why I didn't see that. Thanks a tonne, David! – Michael G Feb 04 '14 at 16:23
It's so easy to miss stuff like this, especially if you've been wracking your brains for ages. Fresh pair of eyes and all that. – David Randall Feb 04 '14 at 16:27

score 0 · Answer 2 · answered Feb 04 '14 at 15:53

0

The floats are probably killing you. Try adding one last

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

before closing the navContainer

answered Feb 04 '14 at 15:53

Federico Jacobi

119
1
2

score 0 · Answer 3 · edited May 23 '17 at 12:11

0

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/

edited May 23 '17 at 12:11

Community

1
1

answered Feb 04 '14 at 16:00

CervEd

3,306
28
25

Thanks for the additional info Cerv! – Michael G Feb 04 '14 at 16:24

Can't get div to wrap around my header. Can anyone see why?

3 Answers3