CODEWITHSUNDEEP
css
Jack Robson
Jack Robson

Reputation: 11

Unknown gap between the header container and main content container

I've got a mysterious gap between the header container and main container. You can see the big white gap between the top container and main container. I've added a red border to make spotting them easier.

<div id="header">

    <div class="container">

        <div id="logo">
            <h1>Haier</h1>
            <img src="images/logo.jpg"/>
        </div>

        <form id="search">
            <input type='search' placeholder='Enter your Claim ID to track it&rsquo;s progress' id="search-box" />
            <!--t id="submit" type="submit" value="Search" id="search-button" />-->
            <button type="submit" value="Search" class="button_submit">Search</button>
        </form>

        <ul id='menu'>
            <li class="active"><a href="">Home</a></li>
            <li><a href="">Qualifying Purchases</a></li>
            <li><a href="">FAQs</a></li>
            <li><a href="">Terms and Conditions</a></li>
            <li><a href="">Contact Us</a></li>
            <li class="claim"><a href="">Claim</a></li>
        </ul>       

    </div>

</div>

<div id="main">

    <div class="container">

        <div id="block_content">

            Main

        </div>          

    </div>

</div>

Here is the CSS:

* {
    margin:0;
    padding:0;
}

body {
    margin:0px; padding:0px;
    background-color:#d2d3d5;
}
#header {
    background:white;
    min-height: 150px;
}
#main {
    background:white url(images/background_slice.jpg) repeat-x;
}
#footer {
    color:#9a9a9b;
}
.container {
    overflow: auto; 
    border:1px solid red;   
}

#header {
    padding-top:20px;
}

And here is a link to a live preview of the current page: http://goo.gl/8rwiCR

Any help appreciated.

Upvotes: 0

Views: 60

Answers (2)

Dennis
Dennis

Reputation: 368

It is because you set a min-height to the #header.

Upvotes: 0

deem
deem

Reputation: 1252

This is because you have set an min-height: 150px; to header and header size is less than this value.

#header {
    background: #FFF none repeat scroll 0% 0%;
    min-height: 150px;
}

Change it or remove.

Upvotes: 2

Related Questions