Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

bottom margin for body

7:00 pm on Dec 15, 2010 (gmt 0)

5+ Year Member

I'm sure I'm doing something a bit silly here but I can't for the life of me figure out what!

I'm trying to get a bottom margin of 20px to appear below the white block that is center vertically in the browser. I've tried a lot of different things but nothing seems to work.

Any help or ideas would be greatly appreciated…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
body {
padding: 0;
background-color: #eaeaea;
margin: 20px 0;

#container {
width: 970px;
margin-right: auto;
margin-left: auto;

#wrap {
background-color: #fff;
width: 930px;
padding: 30px 20px 20px;
float: left;
height: 1500px;
<div id="container">
<div id="wrap">
10:38 pm on Dec 15, 2010 (gmt 0)

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member

It might be the issue of collapsed margins, the most undesirable and poorly thought out implementation in all of CSS. It should seriously be removed as it's anti-intuitive and has wasted countless hours. Unfortunately since it's already implemented in all browsers what you'll have to do is use padding in conjunction with margin which is the only way to get around this implementation bug (the top and bottom margins will collapse if they are both 20px in example I think). Yes I consider it a bug and nothing will change my mind as anti-intuitive standards should not be made in to standards. Hope this helps.

- John
9:31 am on Dec 16, 2010 (gmt 0)

5+ Year Member

I agree JAB Creations, even though I am aware of the collapsing margin bug/feature I still try to avoid coding designs that feature it just because it seems 'wrong'.

The most unintuitive thing about imo is how it only applies to vertical margins.
9:37 am on Dec 16, 2010 (gmt 0)

5+ Year Member

Apologies, so does that mean that I would be unable to add a bottom margin to this i.e. so the body background colour goes around the actual content area.
9:48 am on Dec 16, 2010 (gmt 0)

5+ Year Member

Sorry Greencode, the problem here is not collapsing margins after looking at your code.

If you put your margin rules on #wrap, it will work and add a margin at the bottom of the page.

If you think about it from the point of "I want a margin at the bottom of this element with a white background" - you need to add the margin to the element with the white background, in this case #wrap.
10:04 am on Dec 16, 2010 (gmt 0)

5+ Year Member

But I've tried adding a margin-bottom: 20px to the #wrap element and that still doesn't create a bottom margin?!
10:18 am on Dec 16, 2010 (gmt 0)

5+ Year Member

I had another look and while that works in Firefox it doesn't work in IE.

The problem here is that #wrap is floated left.

If you lose this, the bottom margin will work. Or you could add something to clear the float - so your HTML is like the below:

<div id="container">
<div id="wrap">
<br style="clear:both"/>
10:26 am on Dec 16, 2010 (gmt 0)

5+ Year Member

Perfect - thanks so much milosevic. I added the clear and that's worked a treat.

Featured Threads

Hot Threads This Week

Hot Threads This Month