Date: 08/10/05 (WebDesign)    Keywords: css

I've been working on getting a layout to work created entirely using CSS. I thought I had gotten it worked out, but yesterday, I was at someone's place that had a lower resolution on their computer (almost think it was 640x480) and the footer was displaying behind the columns of text instead of under it. I would really appreciate it if someone can take a look at what I have and give me pointers on how to do things a little different. (PS. Ignore that the logo is a little fuzzy - that will change).

http://www.activedigitalmedia.com/azzarello/



body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
background-color: #F0F0F0;
margin: 0;
height: 80%;
}
h1 {
background-color: #000099;
background-image: url(../images/lft_title.gif);
background-repeat: no-repeat;
width: 200px;
height: 20px;
font-weight: bold;
color: #FFFFFF;
font-size: 14px;
padding-left: 25px;
}
#header {
background-image: url(../images/header.gif);
height: 205px;
background-repeat: no-repeat;
background-position: center top;
}
#navbarborder {
background-image: url(../images/shadow.gif);
height: 3px;
width: 749px;
}
#navbar ul li {
list-style-type: none;
margin: 0;
padding: 0;
font-weight: bold;
color: #0000CC;
}
#navbar {
text-align: center;
background-color: #FFFFFF;
width: 749px;
position: static;
}
#navbar ul {
margin: 0;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: solid 1px #000000;
}
#navbar ul li a:link {
display: inline;
text-decoration: none;
font-weight: bold;
padding-left: 5px;
}
#navbar ul li a:hover, #navbar ul li a:visited {
display: inline;
text-decoration: none;
font-weight: bold;
padding-left: 5px;
color: #FF0000;
}
#content {
background-color: #FFFFFF;
width: 739px;
position: static;
margin: 0;
padding: 5px;
text-align: left;
min-height: 75%;
height: 75%;
}
#column1 {
position: absolute;
top: 245px;
width: 225px;
text-align: justify;
border-right: dotted 1px #666666;
padding-right: 10px;
background-color: #FFFFFF;
}
#column2 {
top: 245px;
margin-left: 245px;
width: 225px;
text-align: justify;
border-right: dotted 1px #666666;
padding-right: 10px;
position: absolute;
background-color: #FFFFFF;
}
#column3 {
position: absolute;
top: 245px;
width: 250px;
margin-left: 490px;
text-align: justify;
background-color: #FFFFFF;
}
#footer {
clear: both;
background-image: url(../images/footer.gif);
height: 60px;
background-repeat: no-repeat;
background-position: center bottom;
}
#copyright {
position: static;
margin: 0;
padding-top: 35px;
padding-bottom: 5px;
padding-left: 40px;
text-align: left;
width: 749px;
font-size: 9px;
color: #FFFFFF;
}

Source: http://www.livejournal.com/community/webdesign/952795.html