PDA

View Full Version : Background for div not in the right place


scifin
12-01-2011, 08:46 PM
I am sure it is obvious and I am just missing it because I have done this lots of times before but can someone tell me how to align the background in the <content> div to the top of the page and put the header graphic at 150px from the top of the page like it is now?

It should look more like this: http://www.joebozzi.com/test.html
and not like it is now: http://www.joebozzi.com/testing.html

I am pulling my hair out!

gentleone
12-01-2011, 10:24 PM
I don't know why the top margin on the header makes the background image jump down in the content div, but you can solve it to move the background image to the body which is also a common thing to do with large website background images.

So I've just edited the CSS of the body and the content div like so:

body {
background-color: #000000;
background-image: url("http://www.joebozzi.com/color-bg.jpg");
background-position: center top;
background-repeat: no-repeat;
margin-bottom: 0;
margin-top: 0;
padding-bottom: 0;
}

#content {
height: 885px;
margin: 0 auto;
width: 960px;
}



But since you use now pretty much all the background properties in the CSS rule of the body, it's wise to use the shorthand for that like so:

body {
background: #000 url("http://www.joebozzi.com/color-bg.jpg") no-repeat center top;
margin-bottom: 0;
margin-top: 0;
padding-bottom: 0;
}

DWcourse
12-02-2011, 04:43 AM
A bit of explanation: The problem is CSS collapsing margins: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Don't worry if you don't understand it, I'm not sure what it says either.

But for your case it means that if you have a div with no padding-top or border-top then the margin of the first element in that div will "overflow" outside the div.

So your header margin actually "overflows" the content container moving the #content container down the page.

Gentleone's solution is the best or you could set the top margin of header to 0 use padding-top:150px (padding won't overflow) instead.

For future references, here are some ways to prevent collapsing margins:

1. Set the display property of the outside div (#content) to display:inline-block (in your case that would also uncenter the layout so it's not a good option)

2. Apply a top padding to the outside div (#content) 1px would do it.

3. Apply a top border to the outside div (#content) 1px would do it.

gentleone
12-02-2011, 10:17 AM
A bit of explanation: The problem is CSS collapsing margins: http://www.w3.org/TR/CSS21/box.html#collapsing-margins
Great find, Jim! I've heard of the term collapsing margins before, but never looked into it. I guess it's because I never ran into the issue myself and therefore didn't had to deal with it yet.

DWcourse
12-02-2011, 10:35 PM
As with so many things HTML/CSS the name is confusing and the official explanation is apparently written in some foreign language. I had to deal with this a number of times before it began to make sense.

scifin
12-05-2011, 06:52 PM
Thanks lads, gonna try and give it a shot now.

scifin
12-07-2011, 08:41 PM
I tried it and it worked but now I have another most likely something I am missing question:
Why is my main3 <div> way the hell down on the side like that? Why can't it be nice like it's brother and be where it is supposed to be, on the right of my main2 <div>?

BullDog
12-07-2011, 09:32 PM
your trying to fit 830px in a 770px div. main2 has a 100px left margin? why not adjust your margins and float main 2 left?

scifin
12-07-2011, 10:02 PM
Dear Math,
Your are not my friend and sometimes you make me look stupid in front of other people.
Sincerely,
Scifin

Thanks BullDog, I am way too tired to keep working and my brain is like a colander filled with last night's macaroni.