I am having trouble understanding the following 2 issue:
1) Why in IE the background color from another div shows behind a div that I have set to 100% height (color from class "row" is showing behind div with class "left"). This does not happen in Mozilla/Netscape/Firefox.
2) How to get the footer to stay at the bottom of the page when the content in either of the "columns" is not longer than the height of the page. The "columns" should still stretch down to the footer in this case, but when the content in either of the columns is longer than the page, the footer should appear below the columns.
Can anyone help me out?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
margin: 0;
padding: 0;
}
.header {
text-align: center;
border-bottom: 4px solid #999999;
width: 100%;
background-color: #CCCCCC;
padding: 5px 0px;
}
.footer {
width: 100%;
clear: both;
padding-top: 10px;
}
#wrapper {
width: 100%;
margin: 0;
padding: 0;
height: 100%
}
.row {
clear: both;
width: 100%;
height: 100%;
background-color: yellow;
border-bottom: 4px solid #999999;
}
.left {
float: left;
border-right: 4px solid #999999;
padding-right: 5px;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
overflow: auto;
background : #EEEEEE;
}
.right {
float: left;
width: auto;
text-align: left;
height: 100%;
padding-left: 5px;
padding-right: 5px;
margin-top: 2px;
background : transparent;
}
.odd {
background-color: #CCCCCC;
}
.even {
background-color: #999999;
}
li {
white-space: nowrap;
}
</style>
</head>
<body>
<div class="header">My Header</div>
<div id="wrapper">
<div class="row">
<div class="left">
<p>Left Side</p>
</div>
<div class="right">Right side</div>
</div>
</div>
<div class="footer">My Footer</div>
</body>
</html>Isn't ALA great, they save me and you a whole load of time. Here's an article for your columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->) and one for your footer (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/footers/">http://www.alistapart.com/articles/footers/</a><!-- m -->). Read these and if there's still something you can't fix I'll help you out with it.
1) Why in IE the background color from another div shows behind a div that I have set to 100% height (color from class "row" is showing behind div with class "left"). This does not happen in Mozilla/Netscape/Firefox.
2) How to get the footer to stay at the bottom of the page when the content in either of the "columns" is not longer than the height of the page. The "columns" should still stretch down to the footer in this case, but when the content in either of the columns is longer than the page, the footer should appear below the columns.
Can anyone help me out?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
margin: 0;
padding: 0;
}
.header {
text-align: center;
border-bottom: 4px solid #999999;
width: 100%;
background-color: #CCCCCC;
padding: 5px 0px;
}
.footer {
width: 100%;
clear: both;
padding-top: 10px;
}
#wrapper {
width: 100%;
margin: 0;
padding: 0;
height: 100%
}
.row {
clear: both;
width: 100%;
height: 100%;
background-color: yellow;
border-bottom: 4px solid #999999;
}
.left {
float: left;
border-right: 4px solid #999999;
padding-right: 5px;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
overflow: auto;
background : #EEEEEE;
}
.right {
float: left;
width: auto;
text-align: left;
height: 100%;
padding-left: 5px;
padding-right: 5px;
margin-top: 2px;
background : transparent;
}
.odd {
background-color: #CCCCCC;
}
.even {
background-color: #999999;
}
li {
white-space: nowrap;
}
</style>
</head>
<body>
<div class="header">My Header</div>
<div id="wrapper">
<div class="row">
<div class="left">
<p>Left Side</p>
</div>
<div class="right">Right side</div>
</div>
</div>
<div class="footer">My Footer</div>
</body>
</html>Isn't ALA great, they save me and you a whole load of time. Here's an article for your columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->) and one for your footer (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/footers/">http://www.alistapart.com/articles/footers/</a><!-- m -->). Read these and if there's still something you can't fix I'll help you out with it.