PDA

View Full Version : Works on firefox but not on evil explorer 6??


whitedragon101
06-18-2009, 10:29 PM
I have coded the following page which has a footer which always stays at the bottom of the page and two columns in the main body that always extend down to the bottom of the page. However the two columns do not extend when using IE6 does anyone know of a fix for this?

<!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>test_stretch</title>
<style type="text/css">
<!--
html, body {
height: 100%;
margin:0;
background-color: #666;
}
#parent #child2 #right_bar {
float: right;
width: 600px;
background-color: #FFF;
height: 100%;
}
#parent #top_bar {
font-size: 12pt;
text-align: center;
top: 158px;
position:absolute;
width: 750px;
height: 30px;
}
#parent #child2 #left_bar {
float: left;
width: 150px;
background-color: #936;
height: 100%;
}
#parent {
background-color: #0F0;
width: 750px;
position: relative;
height: 100%;
margin-right: auto;
margin-left: auto;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
}
#parent #banner {
background-color: #03F;
position: absolute;
height:158px;
}
#parent #child2 {
background-color: #F00;
position: absolute;
top:188px;
left:0;
right:0;
bottom:0;
margin-bottom: 30px;

}
#parent #footer {
text-align: center;
position: absolute;
bottom: 0px;
height: 30px;
width: 100%;

}
-->
</style>
</head>

<body>
<div id="parent">
<div id="banner"><img src="images/my banner.jpg" width="750" height="158" alt="banner" /></div>
<div id="top_bar">Content for id "top_bar" Goes Here</div>
<div id="child2">
<div id="left_bar">left</div>
<div id="right_bar">right</div>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>

domedia
06-19-2009, 07:51 PM
It's due to the support for height in ie6. My workaround has always been to use a background image on the parent element, so that it's seems that the 2 columns inside it always stretch to the bottom.

Ricky55
06-20-2009, 01:55 AM
you can use overflow: auto on the div in question. IE then thinks if there something to overflow it must have an height.