...

View Full Version : nested div issue



cssnooburt
11-18-2008, 08:15 PM
Not sure what the deal is but for some reason the top 2px margin is not showing. What have I done wrong? :confused:


<!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>
<title>Untitled Document</title>

<style type="text/css" media="all">
<!--
#boxbottom {
background-color: red;
width: 812px;
height: 405px;
}

#boxtop {
background-color: #CCC;
width: 808px;
height: 401px;
margin: 2px 0px 0px 2px;
}
-->
</style>

</head>

<body>

<div id="boxbottom">
<div id="boxtop">why is the 2 pixel margin at the top not working?</div>

</div>

</body>
</html>

BoldUlysses
11-18-2008, 09:26 PM
Other CF posters can point out the exact reason why, but I've found that in many instances the margins of a nested div seem to be overridden by content. As far as a solution, you have a couple of options.

Padding on the outer div:


<!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>
<title>Untitled Document</title>

<style type="text/css" media="all">

#boxbottom {
background-color: red;
width: 808px;
height: 401px;
padding: 2px;
}

#boxtop {
background-color: #CCC;
width: 808px;
height: 401px;
}

</style>

</head>

<body>

<div id="boxbottom">

<div id="boxtop">why is the 2 pixel margin at the top not working?</div>

</div>

</body>
</html>

Absolute positioning:


<!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>
<title>Untitled Document</title>

<style type="text/css" media="all">

#boxbottom {
position: relative;
background-color: red;
width: 812px;
height: 405px;
}

#boxtop {
position: absolute;
top: 2px;
left: 2px;
background-color: #CCC;
width: 808px;
height: 401px;
}

</style>

</head>

<body>

<div id="boxbottom">

<div id="boxtop">why is the 2 pixel margin at the top not working?</div>

</div>

</body>
</html>

Lochlan
11-19-2008, 12:08 AM
Strange method for just getting a border?

You could just apply a 2px border to boxtop and get rid of boxbottom. Alternatively, remove the margin from boxtop and just apply 2px padding to boxbottom.

abduraooft
11-19-2008, 08:10 AM
Strange method for just getting a border?

You could just apply a 2px border to boxtop and get rid of boxbottom. Alternatively, remove the margin from boxtop and just apply 2px padding to boxbottom. It's explained at http://complexspiral.com/publications/uncollapsing-margins/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum