PDA

View Full Version : css: margin being applied to wrong element


shake
09 Jul 2009, 07:34 PM
i am laying out a webpage via css and for some reason the 'margin-top' property that i added to one element is moving the entire page contents down. below is the code:
----------html-----------
<body>
<div id="wrapper">
<div id="navigation"> <a href="index.html">home</a> <a href="news.html">news</a> <a href="portfolio.html">portfolio</a> <a href="recent.html">recent work </a> <a href="contact.html">contact</a> </div>
<div id="content">
<div id="contentBox">Content for id "contentBox" Goes Here</div>
</div>
<div id="footer">(c) 2009 evanfarinholt.com</div>
</div>
</body>

---------------css---------
#wrapper {
height: auto;
width: 700px;
margin-top: 35px;
margin-right: auto;
margin-bottom: 50px;
margin-left: auto;
}
#wrapper #navigation {
height: 22px;
background-color: #000000;
border-left-width: 3px;
border-left-style: solid;
border-left-color: #FFFFFF;
}

a {
padding-left: 10px;
padding-right: 10px;
}

a:link, a:visited {
color: #FFFFFF;
text-decoration: none;
background-color: #000000;
}

a:hover, a:active {
background-color: #FFFFFF;
color: #000000;
text-decoration: none;
}

#wrapper #bodyPic {
height: 554px;
}
#wrapper #bottomContent {
background-color: #000000;
height: 150px;
border-left-width: 3px;
border-left-style: solid;
border-left-color: #FFFFFF;
}
#wrapper #newsContent {
height: 500px;
border-left-width: 3px;
border-left-style: solid;
border-left-color: #FFFFFF;
}
#wrapper #footer {
background-color: #000000;
height: 20px;
color: #CCCCCC;
font-size: 13px;
text-align: center;
border-left-width: 3px;
border-left-style: solid;
border-left-color: #FFFFFF;
}
#wrapper #content {
height: 800px;
background-color: #000000;
border-left-width: 3px;
border-left-style: solid;
border-left-color: #FFF;
margin-top: 0px;
}
#wrapper #content #contentBox {
height: 250px;
width: 600px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}
------------------

unfortunately i can't show a picture of what the page looks like, but any help would be much appreciated.

Thanks,
shake
Wickham
10 Jul 2009, 03:01 AM
for some reason the 'margin-top' property that i added to one element is moving the entire page contents down.

That's what it's supposed to do. If you mean making margin-top: 20px; for #wrapper #content where you have margin-top: 0; at present, it will move the div down and show a white space above, moving everything else down too.

One of the differences between margin and padding is that margin moves the whole div including its background-color but padding will move the div leaving its background-color in the padding, so try this instead:-

#wrapper #content {
height: 800px;
background-color: #000000;
border-left-width: 3px;
border-left-style: solid;
border-left-color: #FFF;
/*margin-top: 0px;*/ padding-top: 20px;
}

You are using a doctype, aren't you?
http://www.w3.org/QA/2002/04/valid-dtd-list.html

like
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">