homepage Welcome to WebmasterWorld Guest from 54.237.77.181
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, Moderator: open

CSS Forum

    
bottom margin for body
greencode




msg:4242783
 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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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;
}
</style>
<title></title>
</head>
<body>
<div id="container">
<div id="wrap">
</div>
</div>
</body>
</html>

 

JAB Creations




msg:4242889
 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

milosevic




msg:4243022
 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.

greencode




msg:4243024
 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.

milosevic




msg:4243028
 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.

greencode




msg:4243033
 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?!

milosevic




msg:4243037
 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:

<body>
<div id="container">
<div id="wrap">
</div>
<br style="clear:both"/>
</div>
</body>

greencode




msg:4243038
 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