Hello everybody.
I am designing a website that has footer that stretches across the whole browser and also stays at the bottom ( sticky footer) That seems to work fine. Then I have the main page content contained in a wrapper div that is set to center horizontally and vertically on the page. I just made color boxes for now to show you the concept.
I am building this on a computer with a wide-screen laptop. It is a 1600 x 900 resolution display.
Of course everything looks good on this monitor but Im trying to build this page so that it displays properly on a square monitor 1024 x 768 or higher as well as wide screen displays.
problem #1 im not sure about the proper approach with overflow settings etc. should I be setting overflow to auto on page? footer?
problem #2when I re-size the browser window smaller the page displays a little buggy. even though the footer is suppose to be 100% wide, when you scroll to the right, it cuts off short. Im not sure what the best way to do this is. there are so many sites that use this functionality but they seem to render great on any size screen. my main content div is in the 900's wide so that should be safe at least.
problem #3 If you take a look at the bottom right of the footer where the copyright stuff goes and make browser smaller, did I do the overlapping correct? I have it set to z-index under the navigation links. Id like some input.
can anybody take a look and let me what I am doing wrong with this page or, any suggestions.
My code is below:
HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>-</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper"><!--wrapper open-->
<div id="main_content"><!--main_content open-->
<div id="content_left"></div>
<div class="divider_line"></div>
<div id="content_middle"></div>
<div class="divider_line"></div>
<div id="content_right"></div>
</div><!--main_content close-->
</div><!--wrapper close-->
<div class="footer"><a href="index.html">HOME</a> <a href="page1.html">PAGE1</a> <a href="page2.html">PAGE2</a> <a href="page3.html">PAGE3</a> <a href="page4.html">PAGE4</a> <a href="contact.html">CONTACT</a><div id="copyright">COPYRIGHT 2011 | WEBSITE BY <a href="#" target="_blank">MY URL</a> | <a href="sitemap.html">SITEMAP</a> | <a href="terms.html">TERMS</a></div>
</div><!--footer close-->
</body>
</html>
CSS
Code:
html, body {
margin: 0;
height: 100%;
background-color: #cdcdcd;
overflow: auto;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -38px;
}
#main_content {
height: 428px;
width: 938px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -233px; /*set to a negative number 1/2 of height*/
margin-left: -469px; /*set to a negative number 1/2 of width*/
z-index: 998;
}
.footer,.push {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #cdcdcd;
text-align: left;
height: 38px;
position: relative;
z-index: 999;
line-height: 38px;
word-spacing: 32px;
background-color: #FFF;
padding-left:25px;
}
a:link {
color: #000;
text-decoration: none
}
a:visited {
color: #000;
text-decoration: none
}
a:active {
color: #000;
text-decoration: none
}
a:hover {
color: #444;
text-decoration: underline
}
#copyright {
position:absolute;
width:auto;
height:38px;
z-index:-1;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 38px;
color: #000;
top: 0px;
right: 25px;
word-spacing: normal;
}
#content_left {
float: left;
height: 428px;
width: 200px;
background-color: #9F3;
}
#content_middle {
float: left;
height: 428px;
width: 350px;
background-color: #99F;
}
#content_right {
height: 418px;
width: 350px;
float: right;
text-align: justify;
background-repeat: repeat;
padding-top: 10px;
background-color: #F90;
}
.divider_line {
float: left;
height: 428px;
width: 9px;
position: relative;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #000;
margin-right: 9px;
}
Before you post, read our: 
