Forum Moderators: not2easy
<!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">
html, body, .wrapper {
height: 100%;
margin: 0;
padding: 0;
border: none;
}
body {
background: rgb(255,255,255);
font-size: 100%;
line-height: 1.125em;
text-align:center;
}
table,td,th{vertical-align:top}
.wrapper {
background-color: rgb(255,222,239);
margin:0px auto;
padding: 0px 30px;
width: 52%;
border: 1px solid rgb(153,0,51);
text-align: left;
}
.header {
padding-top: 5px;
margin:auto;
border-bottom: 1px solid rgb(153,0,51);
overflow:hidden;
}
.navigation {
border-right: 1px solid rgb(153,0,51);
padding:10px;
}
.navigation ul {
width: 154px;
border-bottom: 0px solid rgb(153,0,51);
}
.navigation li {
width: 152px;
line-height: 2em;
height: 2.5em;
font-family: "MS Trebuchet", Arial, sans-serif;
font-size: 100%;
}
.navigation li a {
display: block;
text-decoration: none;
background: rgb(255,222,239);
color: rgb(153,0,51);
width: 142px;
padding: 0 5px;
}
.navigation li a:hover {
background: rgb(153,0,51);
color: rgb(255,255,255);
}
.content {
width:71%;
padding:10px;
}
.middle{height:100%}
* html .middle{height:80%}/* rough approximation for ie6*/
*+html .middle{height:80%}/* rough approximation for ie7*/
.footer {
font-family: Tahoma, Arial, sans-serif;
font-size: 0.675em;
text-align: center;
border-top: 1px solid rgb(153,0,51);
}
</style>
</head>
<body>
<table class="wrapper" cellspacing="0" cellpadding="0">
<tr>
<td class="header" colspan="2"><h1>Header</h1></td>
</tr>
<tr class="middle">
<td class="navigation">nav</td>
<td class="content">content</td>
</tr>
<tr>
<td class="footer" colspan="2"><p>footer</p><p>footer</p></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a {
color:rgb(153,0,51);
}
html, body, .wrapper {
height: 100%;
margin: 0;
padding: 0;
border: none;
}
body {
background: rgb(255,255,255) url(background.jpg) repeat-y fixed center;
font-size: 100%;
line-height: 1.125em;
text-align:center;
}
h1 {
margin:12px 0 8px;
text-align: left;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 1.55em;
color: rgb(153,0,51);
}
p {
margin-top: 12px;
margin-right: 8px;
margin-left: 0px;
text-align: justify;
font-family: Tahoma, Arial, sans-serif;
font-size: 1.0em;
color: rgb(0,0,0);
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.navigation ul {
width: 154px;
border-bottom: 0px solid rgb(153,0,51);
}
.navigation li {
width: 152px;
line-height: 2em;
height: 2.5em;
font-family: "MS Trebuchet", Arial, sans-serif;
font-size: 100%;
}
.navigation li a {
display: block;
text-decoration: none;
background: rgb(255,222,239);
color: rgb(153,0,51);
width: 142px;
padding: 0 5px;
}
.navigation li a:hover {
background: rgb(153,0,51);
color: rgb(255,255,255);
}
.wrapper {
background-color: rgb(255,222,239);
margin:0px auto;
padding: 0px 30px;
width: 52%;
border: 1px solid rgb(153,0,51);
text-align: left;
}
table.wrapper td {
vertical-align:top
}
.header {
padding-top: 5px;
margin:auto;
border-bottom: 1px solid rgb(153,0,51);
overflow:hidden;
white-space:nowrap;
}
.footer {
font-family: Tahoma, Arial, sans-serif;
font-size: 0.675em;
text-align: center;
width:100%;
border-top: 1px solid rgb(153,0,51);
}
#footer td {
vertical-align:bottom
}
.icons, .logo {
padding-top: 15px;
}
.logo img {
float:right;
}
.line {
width:95%;
margin:auto;
clear:both;
margin:0 10px;
}
.empty {
border-left: 1px solid rgb(153,0,51);
width:4%;
}
.content {
width:73%;
}
.middle {
clear:both;
width:100%;
}
.characters {
float:right;
width:320px;
}
</style>
</head>
<body>
<table class="wrapper">
<tr>
<td>
<table class="header">
<tr>
<td class="icons"><img src="image1.gif" width="88" height="88" alt="icon"><img src="image2.gif" width="88" height="88" alt="icon"><img src="image3.gif" width="88" height="88" alt="icon"><img src="image4.gif" width="88" height="88" alt="icon"><img src="image5.gif" width="88" height="88" alt="icon"></td>
<td class="logo"><img src="image.gif" width="294" height="88" alt="logo"></td>
</tr>
</table>
<table class="middle">
<tr>
<td class="navigation"><ul>
<li><a href="index.htm">Home</a></li>
<li><a href="afterschool.htm">Menu2</a></li>
<li><a href="contact.htm">Menu3</a></li>
<li><a href="gallery.htm">Menu4</a></li>
<li><a href="girlscouts.htm">Menu5</a></li>
<li><a href="parties.htm">Menu6</a></li>
<li><a href="programs.htm">Menu7</a></li>
<li><a href="registration.htm">Menu8</a></li>
<li><a href="summer.htm">Menu9</a></li>
<li><a href="testimonials.htm">Menu10</a></li>
</ul></td>
<td class="empty" ><img src="spacer.gif" width="1" height="1" alt=""></td>
<td class="content" valign="top"><h1>Welcome</h1>
<table class="characters" cellspacing="10">
<tr>
<td valign="top"><img src="image.jpg" width="300" height="117" alt="characters" border="2"> </td>
</tr>
</table>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p></td>
</tr>
</table></td>
</tr>
<tr id="footer">
<td><div class="footer"> Company Name• Company Address• Telephone: #*$!-#*$!-#*$!X<br>
<a href="mailto:info@socactivitycenter.com">info@company.com</a> <br>
© 2011 Company. All rights reserved. </div></td>
</tr>
</table>
</body>
</html>
[edited by: alt131 at 10:44 am (utc) on Jun 24, 2011]
[edit reason] Thread Tidy [/edit]
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
* {/* for demo only - use a proper reset in production*/
margin:0;
padding:0
}
h1, h2, p {
margin:.5em 0;
}
html, body {
height:100%;/* needed to base 100% height on something known*/
text-align:center;
}
body {
background:#fff;
color:#000;
font-size: 100%;
line-height: 1.3;
text-align:center;
}
body:before {/* Opera Fix*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* negate effect of float*/
}
#outer:after {
clear:both;
display:block;
height:1%;
content:" ";
}
#outer {
min-height:100%;
clear:both;
padding:1px 0;
background: rgb(255,222,239);
margin:-90px auto 0;/*footer height + extra to make space at bottom of layout - this drags the outer up through the top of the monitor */
width: 60%;
min-width:600px;
max-width:1200px;
border: 1px solid rgb(153,0,51);
border-bottom:0;
border-top:0;
text-align: left;
}
* html #outer {
height:100%
}
#header {
background:#fff;/* rub border out*/
padding:120px 0 0; /* soak up negative margin and allows header to start at top of page*/
margin:0 -1px;/* rub border out*/
position:relative;
zoom:1.0;
}
#header h1 {
margin:0 30px;
border-bottom: 1px solid rgb(153,0,51);
}
#header .inner {
border: 1px solid rgb(153,0,51);
border-bottom:none;
background: rgb(255,222,239);
padding:1px 0;
}
#footer {/* footer now sits at bottom of window*/
width:60%;
background: rgb(255,222,239);
margin:auto;
height:60px;/* must be a fixed height unfortunately */
clear:both;
min-width:600px;
max-width:1200px;
border: 1px solid rgb(153,0,51);
border-top:none;
text-align: left;
padding:1px 0;
}
#footer .inner {
margin:0 30px;
border-top: 1px solid rgb(153,0,51);
}
#sidebar {
float:left;
width:170px;
border-right: 1px solid rgb(153,0,51);
margin:0 0 0 30px;
display:inline;
padding:1px 0;
}
#main {
overflow:hidden;
zoom:1.0;
border-left:1px solid rgb(153,0,51);
position:relative;
left:-1px;
padding:1px 10px;
}
* html #main {
left:-4px
}
</style>
</head>
<body>
<div id="outer">
<div id="header">
<div class="inner">
<h1>Header</h1>
</div>
</div>
<div id="sidebar">
<p>side column</p>
<p>side column</p>
<p>side column</p>
<p>side column</p>
</div>
<div id="main">
<p>main column</p>
<p>main column</p>
<p>main column</p>
<p>main column</p>
<p>main column</p>
<p>main column</p>
<p>main column</p>
</div>
</div>
<div id="footer">
<div class="inner">
<p>Sticky Footer</p>
</div>
</div>
</body>
</html>
