Layout: HTML + CSS - html

Question

I have this code:
<div class="container" id="container">
<div class="content" id="content">
<div class='nav'>
<ul>
<li><a href='#'>One</a></li>
<li><a href='#'>Two</a></li>
<li><a href='#'>Three</a></li>
<li><a href='#'>Four</a></li>
<li><a href='#'>Five</a></li>
</ul>
</div>
<div class='innercontent'>
test
</div>
</div>
</div>
With the following CSS:
.content {
background-color: blue;
height: 190px;
padding: 30px;
}
.nav {
background-color: blue;
display: inline-block;
height: 140px;
width: 200px;
margin: 10px;
}
.nav a {
display: block;
text-decoration: none;
color: white;
font-weight: bold;
}
.nav li {
list-style: none;
padding: 0px;
background-color: #369;
padding: 4px 5px;
margin: 8px; 0px;
border-radius: 15px;
text-align: center;
}
.nav ul {
background-color: yellow;
padding: 0px;
margin: 0px;
}
.innercontent {
top: 0px;
background-color: red;
display: inline-block;
height: 20px;
width: 150px;
margin: 10px;
}
Problem: The second div (innercontent)'s top should exactly line up with the first ul's top. What have I done wrong?

Answer 1

Two things and you're done:
add float:left; to .nav
change margin:20px; in .innercontent
so in the end it should look like
.nav {
background-color: blue;
display: inline-block;
height: 140px;
width: 200px;
margin: 10px;
float:left;
}
.innercontent {
top: 0px;
background-color: red;
display: inline-block;
height: 20px;
width: 150px;
margin: 10px;
}
The float is necessary so .innercontent can float around .nav

Answer 2

Try setting the vertical-align:top; for the content. By default the vertical-align is set to baseline.

Answer 3

add float:left for both .nav and .innercontent
I see that you use top property for .innercontent but keep in mind that this properties are used only with positioned elements (relative,absolute,fixed)
I suggest you to read the following two articles to understand how position and float works:
CSS Floats 101 & CSS Positioning 101.
Demo: http://jsfiddle.net/GYPJH/