If just added a sticky footer to this page. It seems to be working fine except that I can’t get the main content (orange and white areas) to fill the total height of the wrap (gray area).
What am I doing wrong?
Any advice would be much appreciated. Thank you.
Hi,
You can’t just set an element to 100% and expect it to go all the way to the bottom of a parent I’m afraid because css doesn’t really work like that. Read the css faq on 100% height for a full explanation of when and where you can use it.
Suffice to say that to get an equal column effect is therefore a little awkward.
The easiest solution is to use the “faux column” approach and make a repeating image that has both column colours and then repeat it down the y-axis of the main wrapper. In that way you don’t need to change the html.
Alternatively you can use my absolute overlay method but it requires a couple of empty divs and some extra css.
Here is a working example using your code.
<!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" lang="en" xml:lang="en">
<head>
<title>ML Architecture</title>
<meta name="description" content=""/>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<link href="css/main-MLA.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/nav-MLA.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<link rel="shortcut icon" href="/favicon.ico" />
<style type="text/css">
body {
background-color: #000;
font-family: Arial, Helvetica, sans-serif;
line-height: 150%;
background-image: url(../images-css/bkgd-body.jpg);
background-repeat: repeat-x;
background-position: left top;
}
html, body {
height: 100%;
}/*for sticky footer*/
* {
margin: 0px;
padding: 0px;
}
#wrap {
width: 980px;
margin: 0 auto;
background-color: #b6aea3;
min-height: 100%;/*for sticky footer*/
}
* html #wrap {
height:100%
}
html {
overflow-y: scroll;
}/*fixes page shift problem*/
img {
border: none;
}
p {
font-size: 12px;
line-height: 150%;
}
a:hover, a:focus, a:active {
outline: none;
-moz-outline-style: none;
}/* to removing dotted outline on links */
#header {
background-color: #FFF;
background-image: url(../images-css/logo-MLA.gif);
background-repeat: no-repeat;
background-position: -2px 0px;
width: 980px;
height: 90px;
}
#header img {
float: left;
padding-top: 25px;
}
/* start MAIN CONTENT */
#main-content {
float: left;
width: 100%;
}
#main-content h1 {
color: #fff;
font-size:16px;
line-height: 130%;
text-indent: 0px;
padding-top: 5px;
padding-bottom: 10px;
}
#main-content h2 {
font-size:13px;
padding-bottom: 7px;
padding-top: 4px;
}
#main-content p strong {
}
/* start COLUMN 1 */
#column1 {
width: 250px;
float:left;
padding-right: 25px;
padding-left: 25px;
padding-bottom: 70px;
}
#column1 h1 {
padding-top: 30px;
padding-bottom: 40px;
font-weight: normal;
}
#column1 h1 a:link, #column1 h1 a:active, #column1 h1 a:visited {
color:#fff;
font-size: 16px;
text-decoration: none;
}
#column1 h1 strong {
color:#000;
font-weight: normal;
text-transform: uppercase;
}
#column1 h1 a:hover {
color:#9d141a;
}
#column1 h2 strong {
color:#FFF;
font-size: 14px;
padding-bottom: 7px;
line-height: 170%;
}
#column1 h2 {
color:#000;
font-size: 12px;
padding-bottom: 7px;
line-height: 125%;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #666;
}
#column1 p {
padding-top: 7px;
padding-bottom: 7px;
font-size: 12px;
line-height: 140%;
}
#column1 #testimonial {
color:#FFF;
font-size: 12px;
padding-bottom: 7px;
line-height: 180%;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
width: 220px;
}
/* bullet points */
#column1 ul {
margin-left: 0;
}
#column1 li {
line-height: 130%;
padding-bottom: 10px;
list-style-type: none; /*list-style-position: outside; margin-left: 10px; */
font-size: 12px;
}
/* end bullet points */
/* end COLUMN 1 */
/* start COLUMN 2 */
#column2 {
float:left;
width: 655px;
padding-right: 25px;
}
#column2 img {
padding: 0;
margin: 0;
float:left;
}
#column2 h1 {
color:#fff;
font-size: 14px;
padding-top: 30px;
padding-bottom: 7px;
line-height: 125%;
}
#column2 p {
padding-top: 5px;
padding-bottom: 7px;
padding-right: 25px;
padding-left: 25px;
}
#column2-project {
background-color: #fff;
float:left;
width: 680px;
}
#column2-project img {
float: left;
}
.clearfloats {
clear: both;
display: block;
}
#footer {
padding-left: 25px;
background-color: #555;
margin: 0 auto;
position: relative;
margin-top: -50px;/* negative value of footer height */
width: 955px;
height: 50px;
clear:both;
z-index:3;
}
#footer p {
color: #bbb;
font-size: 9px;
padding-top: 7px;
}
.spacer-10 {
height:10px;
}
.spacer-10 {
height:15px;
}
.spacer-20 {
height:20px;
}
.spacer-30 {
height:30px;
}
.spacer-40 {
height:40px;
}
a:link {
color: #000;
text-decoration: underline
}
a:visited {
color: #555;
text-decoration: underline
}
a:hover {
color: #9a0012;
text-decoration: none
}
a:active {
color: #000;
text-decoration: none
}
sup {
height: 0;
font-size: 7px;
vertical-align: super;
}
.register {
font-size: 9px;
vertical-align: 15%;
}
#wrap {
position:relative
}
#column1, #column2, #main-content {
position:relative;
z-index:2;
}
.bg1, .bg2 {
position:absolute;
top:0;
bottom:0;
z-index:1;
}
.bg1 {
left:0;
width:300px;
background:#FC9;
}
.bg2 {
position:absolute;
left:300px;
top:0;
bottom:0;
width:680px;
background:#fff;
}
* html .bg1, * html .bg2 {
top:auto;
height:999em;
}
</style>
</head>
<body>
<!--begin wrap-->
<div id="wrap">
<!--begin MAIN CONTENT-->
<div id="main-content">
<!--begin COLUMN 1-->
<div id="column1">
<h1><strong>About</strong> Philosophy </h1>
<p> </p>
<div id="testimonial">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
<!--end COLUMN 1-->
<!--begin COLUMN 2-->
</div>
</div>
<div id="column2">
<h1>Professional Expertise</h1>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.</p>
<p> This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </p>
</div>
<!--end COLUMN 2-->
</div>
<!--end maincontent-->
<div class="clearfloats">
<!--placeholder-->
</div>
<div class="bg1"></div>
<div class="bg2"></div>
</div>
<!--end wrap-->
<!--start footer-->
<div id="footer">
<p>Copyright © 2011 ML Architecture - All rights reserved.</p>
</div>
<!--end footer-->
</body>
</html>
Also have a look at the sticky footer in the CSS faq as the method you are using doesn’t work in opera and various other browsers. The method in the faq is a little more complicated but more stable cross browser.