Monday, 15 July 2013

css - Why does removing a border from a div break my layout? -


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