Højde på div i firefox vs IE
HejJeg har lidt problemer med css'en på denne side:
http://afriis.dk/kundesystemer/kriskon/test.php
Jeg vil gerne have den blå og røde kolonne til at have den samme højde hele tiden.. De skal begge have en mimimum højde og så ellers bare tilpasse sig indholdet.
Det virker fint i IE, men i firefox er højden hele tiden 100%.. Hvad kan heg ændre??
CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Stretch Footer</title>
<style>
html, body {
margin: 0;
padding: 0;
background-color: #fff;
height: 100%;
}
#left {
background-color : blue;
height : 100%;
width : 200px;;
float:left;
}
#right {
background-color : red;
height : 100%;
width : 700px;
float:left;
}
#main {
min-height:150px;
height:auto!important;
height:150px;
width:900px;
}
#footer{
width:100%;
height:50px;
background-color:green;
float:bottom;
}
</style>
</head>
<body>
<div id="main">
<div style="width:100%;height:50px;background-color:yellow;float:top;">
Header
</div>
<div id="left">
xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>
xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>xxx<br>
</div>
<div id="right">
yyyy
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
