Question

I am designing a website where I am confused with the divs.

<div id="header_wrapper">
    <div class="header">
        <div class="logo">
            <img src="css/images/logo-dark.png" alt="Mint Bite" />
        </div>

    </div>    
</div>

<div id="menu_wrapper">
    <div class="menu">
        <ul>
            <li>
                <a href="">HOME</a>
            </li>

            <li>
                <a href="">HOME</a>
            </li>

            <li>
                <a href="">HOME</a>
            </li>

            <li>
                <a href="">HOME</a>
            </li>    
        </ul>    
    </div>
</div>

And the CSS :

body
{
    margin:0;
    padding:0;
}
html
{
    background:#d2d1d0;
    margin:0;
    padding:0;
}
#header_wrapper
{
    background:#232323;

}
.header
{
    width:950px;
    margin:0 auto;
}
.logo
{
    width:300px;
    float:left;
}
#menu_wrapper
{
    overflow:auto;
    background:#333333;
    margin:0;
    padding:0;

}
.menu
{
    width:950px;
    margin:0 auto;
}

.menu ul
{
    width:550px;
    margin-left:200px;
}
.menu li
{
    float:left;
    padding:4px;
}
.menu li a
{
    color:#FFFFFF;
}

But instead of displaying menu after header I got result something like the image below. Whats the reason?

Answer 1

add one line after the header wrapper div.

<style>

.clearFix
{
clear:both;
}
</style>

add this div after header wrapper

<div class="clearFix"></div>