Man this is fustrating

HTML & CSS
1

I don’t see why I cant get the #wrapper div to move down 10 or so pixels to align the bottom of the header div with the line in the backgropund of the body, when I try margin-top:10px, everything moves down (including the background.
And also what is wrong with the h1 and why is the picture being cut off at the bottom?
http://fixmysite.us/rotary/index2.php

Thanks…

2

Give #wrapper about 13px top padding. The h1 bg image is cut off because your font size is about 30px shy of making the h1 tall enough. Lose the top padding and give it a height of 80px. Also set the bg to no repeat.

cheers,

gary

3

I gave wrapper that padding-top: 13px but its not working…
But the <h1> is now good, thanks

4

Give it some more, say another 10px.

cheers,

gary

5

#wrapper {
width:900px;
margin: auto;
background-color:#FFFFFF;
padding-top:13px;
}

did u mean : margin: 0 auto??

6

yes, thanks…

7

now I have 2 more questions, why is the #bottom div not flush against bottom of the Content div.
Also how do I move the #header div down so its flush against top of the the Content div

8

Maybe it’s because #cmid has a bottom margin of 10px.

You do understand you’re going about this back-assward, right? You don’t start with the graphic design, you start with content design. It’s as if you called in the interior designer before you have a house plan.

cheers,

gary

9

when I try margin-top:10px, everything moves down (including the background.

That’s due to “collapsing margins” and effectively the margin-top on #wrapper becomes a margin-top on the body element instead and moves the whole thing down by 10px and is then compounded by the fact that you have an image on the html element and the same image on the body element which is now moved down by 10px.

Remove the image from the html element and the body image propagates there anyway.


[B]body, html {
    margin:0;
    padding:0;
}[/B]
body{
    background:#fff url(http://fixmysite.us/rotary/images/bg_main.jpg) repeat-x top;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    color:#000000;
    font-size:11px;
    line-height:15px;
}
#wrapper {
    width:900px;
 [B]   margin:10px auto 0;[/B]
}
10

what do you mean when an element has a layout?

11

That refers to IE7 and under and its rendering engine has an internal property that sets “haslayout” (“has a layout”) when certain conditions are met.

An element that “has a layout” is expected to take care of itself and its children with more care than elements that do not have “a layout”. MS said that initially this was supposed to increase performance by leaving most elements without haslayout but unfortunately was a flawed concept as the elements without haslayout suffered from a myriad of display bugs that plagued us for years.

Certain elements have haslayout by default and haslayout can also be triggered by a applying certain properties to an element (such as dimensions to mention but one). The full details are in the reference here with links to MSDN and other haslayout information that is pertinent.

12

ok, i Made changes so I didnt give the html element that style, but I’m trying to figure out what is wrong, cause it looks like I still have 2 margins, 1 between Content and #header (I set both the top and bottom margins to 0.
and the same problem exists between the Content and #bottom
(and I bought your CSS reference so that might help me as the answer might be in there)

13

Try to give the content div a width (100%) and float it left.

14

thanks

15

Margins can be a source of frustration until you understand how they work and the special rules that apply to certain elements. I remember when I was learning that I always thought the default behaviour was unintuitive.

You have to remember that for most elements the margins on an element will poke out (or collapse) from the box that it is contained within unless there is something solid in the way such as content, borders or padding (or when the parent element is a block formatting context).

It can be quite confusing unless you know the rules and for example a bottom marrgin on a p element will not extend the background of the parent container unless there is something solid under it such as content,padding or border. However if the parent was floated then the bottom margin on the p element would indeed make the parent bigger as the margin would be kept inside because floats establish a block formatting context as mentioned above.