Can someone suggest a solution for my layout?

OK...check this out! I got this layout to finally work! It stays completely centered (vertically and horizontally) in the browser window regardless of window size. And I recently figured out a way to get the content to stay completely centered within the main content div regardless of the browser windows size.

The only problem is that it only works perfect in modern browsers. IE6 and 5 display the content over to the top/left some. It would be awesome if some one could figure out a way to make it display center in IE6 and 5 as well (only the content within the main div that is, the wrapper div stays centered as is). I tried (text-align: center; and margin: 0 auto, unfortunately that had no effect. I gave it a border so that you can see what it is doing. Thanks!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
/* -------------------- Resets --------------------- */
body, div, address, blockquote, dl, ol, ul, li, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre {
margin: 0;
padding: 0;
}
fieldset, table {
border: none;
}
/* --------------- Document Defaults -------------- */
html {
font-size: 100.01%;
}
body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
font: 62.5%/1.5em Tahoma, Geneva, Arial, Helvetica, 'MS Sans Serif', sans-serif;
color: #000;
background-color: #DACEC2;
}
/* ------------------- Links ---------------------- */
a {
text-decoration: underline;
}
a:visited {
text-decoration: underline;
}
a:active, a:focus, a:hover {
text-decoration: none;
}
a img {
border: none;
}
/* ------------------ Typography ------------------- */
h1 {
font-size: 2.9em;
color: #866F5F;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
padding: .7em 0;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.4em;
}
p, li {
font-size: 1.2em;
}
p {
margin: .8em
}
/* -------------------- Forms ---------------------- */
input, label {
vertical-align: middle;
}
label {
cursor: pointer;
}
input, select, textarea {
font-size: 1.2em;
font-family: inherit;
}
input, textarea {
padding: .2em;
}
/* -------------------- Tables --------------------- */
table {
table-layout: fixed;
overflow: hidden;
}
/* ---------------- Global Classes ----------------- */
.center {
text-align: center;
}
.clear {
clear: both;
padding: 0;
margin: 0;
line-height: normal;
}
.floatleft {
float: left;
}
.floatright {
float: right;
}
.hidden {
display: none;
visibility: hidden;
}
.inline {
display: inline;
}
.small {
font-size: 10px;
font-weight: normal;
}
/* ------------------- Template -------------------- */
#wrapper {
position: absolute;
height: 85%;
width: 70%;
left: 15%;
top: 7.5%;
overflow: hidden;
border: 2px solid #866F5F;
background-color: #FFF;
min-height: 360px;
min-width: 540px;
}
#header {
height: 60px;
text-align: center;
}
#nav {
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #866F5F;
border-bottom-color: #866F5F;
height: 15px;
}
#main {
padding: 2.5% 5%;
text-align: center;
}
#content {
position: absolute;
border: 1px solid #333333;
height: 45%;
width: 85%;
left: 7.5%;
top: 27.5%;
}
#footer {
height: 40px;
width: 100%;
font-size: small;
color: #FFFFFF;
text-align: center;
background-color: #866F5F;
position:absolute;
bottom: -1px;
left: 0;
}
/* --------------------- Menus ---------------------- */
/* Main Menu */
#nav ul {
text-align: center;
}
#nav li {
display: inline;
color: #000;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.2em;
font-weight: bold;
}
#nav li a {
text-decoration: none;
color: #000;
padding: 0 1.6em;
}
#nav li a:active, #nav li a:focus, #nav li a:hover {
color: #FFF;
background-color: #DACEC2;
}

/* ----------------- Content/Pages ----------------- */
#copyright {
font-size: 10px;
font-weight: normal;
margin-top: 1em;
}

-->
</style>
</head>

<body>
<div id="wrapper">
<div id="header"><h1>2614 Jefferson Street Units A - B - C</h1></div>
<div id="nav"><ul><li><a href="#">UNIT A</a></li>
<li><a href="#">UNIT B</a></li>

<li><a href="#">UNIT C</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">MAP/DIRECTIONS</a></li>
</ul></div>
<div id="main"> <div id="content"><p> We take the well-being of your child very seriously and work hard to provide an environment that is as healthy as possible. We are committed to keeping our home and the children in it as clean as possible, in order to help minimize and/or prevent the spread of germs.</p>
<p>

Beginning at 18 months old we have the children start to brush their teeth every day after lunch time. This helps the children develop a life long habit of oral hygiene..</p
><p> We take the well-being of your child very seriously and work hard to provide an environment that is as healthy as possible. We are committed to keeping our home and the children in it as clean as possible, in order to help minimize and/or prevent the spread of germs.</p></div>
</div>
<div id="footer"><p id="copyright">Copyright</p></div>
</div>

</body>
</html>

Can someone suggest a solution for my layout?

ewwatson

Marcia

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week