Oh, I hadn't changed the code in the link... I'm at work now and added
your changes to the actual site. Here's the link to the updated version
http://levelwave.com/dev/divtest.php
Everything works great now... but one thing I noticed, now the footer
requires me to scroll a little down to see it even though there's not
enough stuff in the body to push the page down to require the scroll
bars. Any thoughts?
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">
<html>
<head>
<title></title>
<style type="text/css">
html, body
{
height: 100%;
margin: 0 0 0 0;
}
#lh-logo
{
width: 50%;
float: left;
background: #FFFFFF;
color: #333333;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: left;
}
#rh-logo
{
background: #ffffff;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: right;
}
#safety-slogan
{
width: 100%;
height: 33px;
margin: 0 0 0 0;
padding: 7 0 0 0;
border: solid #3366CC;
border-width: 1px 0 0 0;
text-align: right;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
#footer
{
margin: 0 0 0 0;
padding: 5 0 0 0;
border: solid #AAAAAA;
border-width: 1px 0 0 0;
font-size: 10px;
color: #888888;
absolute;
bottom: 5px;
clear: both;
}
#lh-col
{
width: 145px;
height: 95%;
float: left;
border: solid #AAAAAA;
border-width: 1px 1px 0 0;
background: #EEEEEE;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#rh-col
{
background: #ffffff;
height: 95%;
border: solid #AAAAAA;
border-width: 1px 0 0 0;
/*margin: 0 0 0 160px;*/
padding: 0 0 0 0;
position: absolute;
left: 146px;
}
</style>
</head>
<body style="margine: 0;">
<div id="lh-logo">left image</div>
<div id="rh-logo">right image</div>
<div id="safety-slogan">safety slogan here</div>
<div id="lh-col">
<div><a href=#>Quick Links</a></div>
</div>
<div id="rh-col">
<table width="100%">
<tr>
<td>this is the body</td>
<td>this is the body</td>
<td>this is the
bodyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</td>
</tr>
<tr>
<td>this is the body</td>
<td>this is the body</td>
<td>this is the
bodyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</td>
</tr>
<tr>
<td>this is the body</td>
<td>this is the body</td>
<td>this is the
bodyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</td>
</tr>
<tr>
<td>this is the body</td>
<td>this is the body</td>
<td>this is the
bodyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</td>
</tr>
<tr>
<td>this is the body</td>
<td>this is the body</td>
<td>this is the
bodyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</td>
</tr>
</table>
</div>
<div id="footer">this is the footer</div>
TomB wrote:
Quote:
~john schreef:
> Quote:
Thanks! That worked great and was exactly what I was looking for. What
about the footer? How can I get it positioned at the bottom? It seems
to ride along the top if nothings in the body section to push it down.
| >
>
Try adding position: absolute; and bottom: 5px; to the footer div. Not
sure if that will work though. I'd move the footer div outside the
content div and have it sit on the bottom of the page, below everything
else. I guess clear: both; will do the trick in that case...
>
You still haven't got the strict doctype in your code. The page renders
awful in FF now, because you put it into quirks mode.
|
Help with my Style Sheet 
