JOHN6677
26 Aug 2010, 04:51 PM
I am trying to create a div within a div with a padding of 15px all around the inner box. For some reason there is more padding on the top and bottom of the box and I can not figure out why? Can anyone offer a suggestion?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div class="headerbox">
<p>sdfsdfsdf</p>
</div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #828282;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.headerbox {
background-color:#FFF;
width: 970px;
margin: 0px 0px 8px 0px;
}
.oneColFixCtrHdr #container {
width: 970px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #e3e3e3;
padding: 15px 15px 15px 15px;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
box-shadow:0px 2px 10px #333333;
-moz-box-shadow:0px 2px 10px #333333;
-webkit-box-shadow:0px 2px 10px #333333;
text-align: left; /* this overrides the text-align: center on the body element. */
}
Thanks
John
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div class="headerbox">
<p>sdfsdfsdf</p>
</div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #828282;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.headerbox {
background-color:#FFF;
width: 970px;
margin: 0px 0px 8px 0px;
}
.oneColFixCtrHdr #container {
width: 970px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #e3e3e3;
padding: 15px 15px 15px 15px;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
box-shadow:0px 2px 10px #333333;
-moz-box-shadow:0px 2px 10px #333333;
-webkit-box-shadow:0px 2px 10px #333333;
text-align: left; /* this overrides the text-align: center on the body element. */
}
Thanks
John