1

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

Improve this question

4 Answers 4

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Thanks Sandeep. I'm confused (obviously! :-). I see I messed up doing the clear outside the header div (which I just moved). Can you expand on what overflow:hidden does, why it is a substitute for a clear? Thanks for the help.
I'll ask one more question if I may. Is there a way to get that center section "Inspiring Movement..." to float and sit half way between the two flash pieces, but using a minimum padding/margin on both sides?
for your second question you have to change your mark like this jsfiddle.net/9R8SP
for your first question may be it's better you can check these links quirksmode.org/css/clearing.html , stackoverflow.com/questions/2648205/…
Ok, will do. Thanks very much for that additional code you gave to center the middle section. Have a nice night/day. :-)
|
1

You have to clear your floats. If you inspect header with Chrome tools you will see that it has a height of 0. This is because you floated the internal elements (pulling them out of normal flow). Just clear them and your container will again have height. Or assign a height.

Improve this answer

4 Comments

Thanks. Since you guys are so fast at this (thanks BTW), can I ask you, how can I position that Affiliate Care Members link, a couple pixels higher than it is now. I gave it 4px of margin at the bottom, but it doesn't raise up, and I need to keep the header to no more than 120px high (purple flash piece is 100px high). Thanks.
@Ray - assign a negative margin to the top. Margins are like extra space around the edges of the element. Adding a bottom margin just makes it push stuff below it down.
Ah, thanks. The negative margin did it (and I see what you are saying about putting the margin at the bottom). But why didn't this element jam right up against the flash piece above it? Do I have some margins or padding I'm not seeing?
... Looks like the object tag had some margin or padding somehow. When I added a class to clear those out, I was able to get rid of the negative margin.
1

try this

<div class="header"> <div class="headerLeft"> <div class="affiliate"> <div class="headerRight"> <div style="clear: both"></div> //add this </div>
Improve this answer

Comments

0

you can just check that every thing in the div header or not and the inner con-taint must change there background color also when changing headers background color or else you make all con-taint above header should have the transparent background color so if you change hearders background it will reflect for other inner div and con-taints........

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.