I have a site with a sticky footer and I have to keep a background image at the top of my content. This is fine with the border but if I remove the "thin blue solid" range from the contents then the whole thing is pushed and my background image is no longer right on top ...
< Code> & lt; Div id = "mainContain" & gt; & Lt; Div id = "header" & gt; & Lt; / Div & gt; & Lt; Div id = "contentcontain" & gt; & Lt; Div id = "content" & gt; & Lt; H2 & gt; Hog & lt; / H2 & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "footer" & gt; & Lt; / Div & gt; & Lt; / Div & gt;My CSS is:
html, body {padding: 0; Margin: 0; Height: 100%; } #mancontain {min-height: 100%; Status: Relative; } # Headers {Width: 100%; Height: 180 pixels; Background-color: # 111111; } #contentContain {background-image: url ('../ img / shadow-bg.png'); Background-position: center top; Repeat Background: No Repetition; Padding-down: 45px; / * This value is the height of your footer * /} #content {margin: auto; Border: thin blue solid; } #footer {status: complete; Width: 100%; Bottom: 0; Height: 45px; / * This value is the height of your footer * / background color: # 111111; }
You are probably seeing the results of falling margins.
You can prevent the margins from falling by adding a border or some padding at the top of your block element or by creating new block formatting references by setting
overflow: auto for example :
# content {margin: auto; Border: Thin transparent concrete; / * Option 1 * / padding-top: 1px; / * Option 2 * / Overflow: Auto; / * Option 3 * /}
Use which option
If you use the first two options, you can add additional By using 1px
overflow the third option will not affect the height of the element.
The first two options will probably be backwards compatible for all but the oldest browser. Anything that supports CSS2.1 will work as expected.
For the
overflow , it is backed up on IE4 all the way back with some minor exceptions. See for details.
No comments:
Post a Comment