IE6 Disappearing divs
I am working on a layout that has three fixed height columns. The easiest solution seemed to be to:
1. float the center section with margins that correspond to the width of the two outer columns.
2. use an absolute position for the two outer columns.
The center section is split horizontally into a header and main section.
So far so good. It works fine in FF. Not too bad in IE7. The main problem is in IE6.
What happens is that it works fine unless one of the divs inside the center section has a height assigned to it. If a height is assigned then both the outer two columns that have been absolutely positioned just disappear.
Nice Sad
So, I really don't understand this and have got a bit out of my depth.
Any ideas anyone? I have searched for a good answer and have ended up looking at things that are a bit to complicated for me at this point, like hasLayout. Boring to have to ask for help but I do need it!
I have reduced the problem to the following code. It is the div with the id="new" that seems to cause the problem. As soon as I give that div a height it all falls over.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/DTD/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body{
background-color:#999999;
padding: 0px;
margin:0px;
}
#holder{
height: 702px;
position: relative;
float:left;
background-color:#999999;
margin-top:0px;
}
#centercolumn{
min-width:500px;
background-color:#0066CC;
position: relative;
margin: 5px 170px 0px 170px;
height:697px;
float: left;
/* display inline gets rid of double margin in IE6 and before */
display: inline;
}
#leftcolumn{
background-color: #0066CC;
position: absolute;
left:0px;
top:0px;
width: 150px;
height: 697px;
margin: 5px 10px 0px 10px;
}
#rightcolumn{
background-color:#0066CC;
position:absolute;
right:0px;
top:0px;
width: 150px;
height: 697px;
margin: 5px 10px 0px 10px;
}
#new{
background-color:#003300;
}
</style>
</head>
<body>
<div id="holder">
<div id="centercolumn">
Center column text is fantastically interesting. Center column text is fantastically interesting. Center column text is fantastically interesting. Center column text is fantastically interesting. Center column text is fantastically interesting. Center column text is fantastically interesting. Center column text is fantastically interesting. Center column text is fantastically interesting. Center column text is fantastically interesting.
<div id="new">
Center column text is amazingly interesting.
</div>
</div>
<div id="leftcolumn">Left</div>
<div id="rightcolumn">Right</div>
</div>
</body>
</html>
Thanks!!
the examples can be found at:
www.nickcollie.co.uk/example_working.html
www.nickcollie.co.uk/example_not_working.html
CSS Codes
Reply With Quote
Bookmarks