Help with nav bar

[FateAce]

I used to know how to do this, but I'm having problems getting the nav bar for a website I'm making working. I can't get the nav bar to sit inside the header, even though it is inside the header tag. Example:

 

 

 

 

I'm also having trouble with that white space at the top, but the big problem right now is the nav bar.

 

Here is my HTML and CSS code for the above:

 

<header id="headercon">        <h1>Test Site</h1>        <nav>            <ul>                <li>Home</li>                <li>About</li>                <li>Media</li>                <li>Blog</li>            </ul>        </nav>    </header>

 

header {    background-color: #3d3d3d;    height: auto;}#headercon nav {    float: right;    display: block;    position: relative;}#headercon ul {    list-style-type: none;    line-height: normal;    height: auto;    margin: 0px;    padding: 0px;    overflow: hidden;}#headercon li {    display: inline;}#headercon a {    display: block;    padding: 0px 20px;    margin: 0.6em 0.2em 0.6em 0.2em;text-align: center;    text-decoration: none;font-weight: bold;    font-size: 16px;line-height: 50px;    color: #2f2f2f;}

 

[divinedesigns1]

you have the ul tag in the nav, so you might want to actually style that element so it can be in the right place

[dsonesuk]

Your nav is floated, the header can't detect the nav area, so its height adjusts to element it can detect, the h1 tag.Usually using overflow: hidden; on the container i.e the <header> will fix this, and the other benefit of using this is it get rid of collapsing margin problem that is causing the space above header.

[FateAce]

Your nav is floated, the header can't detect the nav area, so its height adjusts to element it can detect, the h1 tag.Usually using overflow: hidden; on the container i.e the <header> will fix this, and the other benefit of using this is it get rid of collapsing margin problem that is causing the space above header.

This has fixed the problem. Thanks.