CODEWITHSUNDEEP
csshtmloverflow
Suraj Hazarika
Suraj Hazarika

Reputation: 667

CSS divs not visible

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?enter image description here

Upvotes: 0

Views: 338

Answers (2)

Moiz
Moiz

Reputation: 2439

<html>
<head>
    <style>
        #mainContainer
        {
            width:960px;
            margin:0 auto;
        }
        #header_wrapper
        {
            background: #232323;

        }
        .header
        {
            width: 950px;
            height:100px;

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

        .menu ul
        {
            width: 550px;
            margin-left: 200px;
        }
        .menu li
        {
            float: left;
            padding: 4px;
        }
        .menu li a
        {
            color: #FFFFFF;
        }
    </style>
</head>
<body>
    <div id="mainContainer">
        <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>
    </div>
</body>
</html>

Upvotes: 0

Moiz
Moiz

Reputation: 2439

add one line after the header wrapper div.

<style>

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

add this div after header wrapper

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

Upvotes: 1

Related Questions