Question

I’m updating a header on a site, and the whole header should have a light gray background. To achieve that, I figured I could simply set the background-color of the overall header div to gray (E7E7E7), but somehow I’m getting a white space in the middle of it, and I can’t seem to select/find the the overall div with Firebug.

The overall div is the one with class=”header”, and the page is http://www.momentumnow.biz/mn/index.shtml.

Would you please let me know what I need to do to get rid of this white space in the header (and what I’m doing wrong here). Note you need to make your browser window wide. I want the purple flash on the right to stay toward the right-hand side of the page as the person makes the page wider.

Thanks

Answer 1

You have to clear your float like this:

div.header {
    background-color: #E7E7E7;
    min-width: 1010px;
    overflow: hidden;
}

Write now there are three floated child DIV's inside you .header DIV which need to have clear. So, write overflow:hidden in your .header.