Sizing Nested div. Padding, Margin, or Something Else?

jfinner1

11-16-2009, 12:57 PM

I have two div, nested one inside the other. One needs to be width: 80%, and the other needs to be 46 pixles smaller then that, centered. I'm not exactly sure how to achieve this. I was thinking to use padding or margins, 23px left and right, but I'm not sure which would be better, or which div I should put it in.

HTML:

<div id="header">
<img src="http://jfinner1.co.cc/images/scrollleft.gif" align="left" alt="Scroll">
<div id="headertext">
Title Goes Here
</div>
<img src="http://jfinner1.co.cc/images/scrollright.gif" align="right" alt="Scroll">
</div>

CSS:

#header{
height: 100px;
width: 80%;
position: absolute;
top:20px;
left: 200px;
z-index: 1;
}
#headertext{
background: url("images/scrollbg.gif");
position: absolute;
top: 0px;
width: 100%;
height: 100px;
text-align: center;
z-index: 1;
font-size: 30px;
line-height: 100px;
}

Excavator

11-16-2009, 03:46 PM

Hello jfinner1,
Since your scroll gifs are presentational and not really content, I think they belong as backgrounds.
Try nesting things like this -<!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>
<style type="text/css">
html, body {
font: 100.1% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#container {
width: 80%;
margin: 30px auto;
background: #999;
overflow: auto;
font-size: 0.8em;
}
#header_out {
height: 100px;
background: #ccc url(http://jfinner1.co.cc/images/scrollleft.gif) no-repeat;
/*position: absolute;
top:20px;
left: 200px;
z-index: 1;*/
}
#header_in {
background: url(http://jfinner1.co.cc/images/scrollright.gif) no-repeat right;
}
#headertext {
background: url(http://jfinner1.co.cc/images/scrollbg.gif) repeat-x;
margin: 0 23px;
text-align: center;
font-size: 30px;
line-height: 100px;
/*position: absolute;
top: 0px;
width: 100%;
z-index: 1;*/
}
#content {
height: 400px;
text-align: center;
padding: 50px 0 0;
}
</style>
</head>
<body>
<div id="container">
<div id="header_out">
<div id="header_in">
<div id="headertext">
Title Goes Here
</div>
</div>
</div>
<div id="content">
some website here
</div>
</div>
</body>
</html>

jfinner1

11-16-2009, 04:52 PM

That worked beautifully! Thank you so much! :-)