I posted this question in the General forums but thought css section is more appropriate =)
The left nav and the center body should be 100% to the footer at all times no matter what content is in there.
Can anyone check this out and tell me what I am doing wrong or missing? If I add a height, it stretches but adds a huge amount of blank space in the body.
THanks!
<!-- m --><a class="postlink" href="http://www.atlantametroappraiser.com/CKA/Yep">http://www.atlantametroappraiser.com/CKA/Yep</a><!-- m -->, it should have been in the CSS section, but I did not see it until I responded to your post in the General section, so that is where my answer is: <!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=23646#post123129Thank">http://forums.webdeveloper.com/showthre ... 23129Thank</a><!-- m --> you Pyro =)Sure thing.
The 1.2em for an IE fix. I know that is a type of measurement, like pixels, but do you know why IE has to have that? Just curious.
Also, any reason a style sheet should be inline over global in this particular case? Or is that just by example?Nope, not sure, really. That was the bug I was trying to work around when I posted my first version.
It appeared to a rendering bug, as when I was trying without the height, if I selected the text (ie. dragged my mouse over the header text) it rendered correctly. Such is life.
Also, yes, em is a unit of measure. 1 em is equal to the elements font size. I used ems so that if the user has a large text size, the header will expand.Interesting. I can't wait til the point where I'm used to these same bugs over and over and just knowing. The before spot isn't fun =)
I modified your working example so that it pretty much looked like the stuff im working on. Everythign works really well, but that left nav still won't show the background color all the way down. Once again, thanks for all your help!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Cathie Knight and Associates, Inc.</title>
<style type="text/css">
body {
margin: 0 0 0 0;
padding: 0;
}
#wrapper {
border: 1px solid #819ebb;
background: url(images/background.gif) repeat-y;
}
#header {
color: #000;
background: #fff;
border-top:5px solid #999966;
border-bottom:6px solid #999966;
border-left:5px solid #999966;
background:#FFCC66;
height: 1.2em; /*needed for IE 6*/
}
#main {
padding: 5px;
margin-left: 155px;
background-color : #CCCC99;
border : 1px solid #999966;
}
#nav {
float: left;
width: 150px;
background-color : #CCCC99;
border : 1px solid #999966;
}
#footer {
color: #000;
clear: both;
background:#FFCC66;
border-top:5px solid #999966;
border-bottom:5px solid #999966;
border-left:5px solid #999966;
height:18px;
text-align:center;
}
.left{
float:left;
}
.right{
float:right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/logo_cka.jpg" width="156" height="102" alt="Cathie Knight and Associates, Inc." class="left">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/atl_corner.gif" width="279" height="102" alt="Metro Atlanta" class="right"></div>
<div id="nav">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<div id="main">
<p>The following text consists of a mock Latin which has been based
upon the average frequency of characters and word lengths of the English
language in order to reproduce a reasonably accurate overall visual
impression. Lorem ipsum dolor sit amet, consectetur adipscing elit, sed
diam nonnumy eiusmod tempor incidunt ut labore et dolore magna aliquam
erat volupat.</p>
<p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor
*** soluta nobis eligend optio comque nihil quod a impedit anim id quod
maxim placeat facer possim omnis es voluptas assumenda est, omnis dolor
repellend. Temporem autem quinsud et aur office debit aut tum rerum
necesit atib saepe eveniet ut er repudiand sint et molestia non este
recusand.</p>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>You just need to change the color of the background image.doh =/ lol thanks =DNo problem. 
The left nav and the center body should be 100% to the footer at all times no matter what content is in there.
Can anyone check this out and tell me what I am doing wrong or missing? If I add a height, it stretches but adds a huge amount of blank space in the body.
THanks!
<!-- m --><a class="postlink" href="http://www.atlantametroappraiser.com/CKA/Yep">http://www.atlantametroappraiser.com/CKA/Yep</a><!-- m -->, it should have been in the CSS section, but I did not see it until I responded to your post in the General section, so that is where my answer is: <!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=23646#post123129Thank">http://forums.webdeveloper.com/showthre ... 23129Thank</a><!-- m --> you Pyro =)Sure thing.
The 1.2em for an IE fix. I know that is a type of measurement, like pixels, but do you know why IE has to have that? Just curious.Also, any reason a style sheet should be inline over global in this particular case? Or is that just by example?Nope, not sure, really. That was the bug I was trying to work around when I posted my first version.
It appeared to a rendering bug, as when I was trying without the height, if I selected the text (ie. dragged my mouse over the header text) it rendered correctly. Such is life.
Also, yes, em is a unit of measure. 1 em is equal to the elements font size. I used ems so that if the user has a large text size, the header will expand.Interesting. I can't wait til the point where I'm used to these same bugs over and over and just knowing. The before spot isn't fun =)
I modified your working example so that it pretty much looked like the stuff im working on. Everythign works really well, but that left nav still won't show the background color all the way down. Once again, thanks for all your help!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Cathie Knight and Associates, Inc.</title>
<style type="text/css">
body {
margin: 0 0 0 0;
padding: 0;
}
#wrapper {
border: 1px solid #819ebb;
background: url(images/background.gif) repeat-y;
}
#header {
color: #000;
background: #fff;
border-top:5px solid #999966;
border-bottom:6px solid #999966;
border-left:5px solid #999966;
background:#FFCC66;
height: 1.2em; /*needed for IE 6*/
}
#main {
padding: 5px;
margin-left: 155px;
background-color : #CCCC99;
border : 1px solid #999966;
}
#nav {
float: left;
width: 150px;
background-color : #CCCC99;
border : 1px solid #999966;
}
#footer {
color: #000;
clear: both;
background:#FFCC66;
border-top:5px solid #999966;
border-bottom:5px solid #999966;
border-left:5px solid #999966;
height:18px;
text-align:center;
}
.left{
float:left;
}
.right{
float:right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/logo_cka.jpg" width="156" height="102" alt="Cathie Knight and Associates, Inc." class="left">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/atl_corner.gif" width="279" height="102" alt="Metro Atlanta" class="right"></div>
<div id="nav">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<div id="main">
<p>The following text consists of a mock Latin which has been based
upon the average frequency of characters and word lengths of the English
language in order to reproduce a reasonably accurate overall visual
impression. Lorem ipsum dolor sit amet, consectetur adipscing elit, sed
diam nonnumy eiusmod tempor incidunt ut labore et dolore magna aliquam
erat volupat.</p>
<p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor
*** soluta nobis eligend optio comque nihil quod a impedit anim id quod
maxim placeat facer possim omnis es voluptas assumenda est, omnis dolor
repellend. Temporem autem quinsud et aur office debit aut tum rerum
necesit atib saepe eveniet ut er repudiand sint et molestia non este
recusand.</p>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>You just need to change the color of the background image.
doh =/ lol thanks =DNo problem.