homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

bottom margin for body

5+ Year Member

Msg#: 4242781 posted 7:00 pm on Dec 15, 2010 (gmt 0)

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">


JAB Creations

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

Msg#: 4242781 posted 10:38 pm on Dec 15, 2010 (gmt 0)

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


Msg#: 4242781 posted 9:31 am on Dec 16, 2010 (gmt 0)

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.


5+ Year Member

Msg#: 4242781 posted 9:37 am on Dec 16, 2010 (gmt 0)

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.


Msg#: 4242781 posted 9:48 am on Dec 16, 2010 (gmt 0)

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.


5+ Year Member

Msg#: 4242781 posted 10:04 am on Dec 16, 2010 (gmt 0)

But I've tried adding a margin-bottom: 20px to the #wrap element and that still doesn't create a bottom margin?!


Msg#: 4242781 posted 10:18 am on Dec 16, 2010 (gmt 0)

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"/>


5+ Year Member

Msg#: 4242781 posted 10:26 am on Dec 16, 2010 (gmt 0)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved