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