Hej alle,
Jeg har et problem med denne kode.
Mit problem består i at Firefox 3.6.10 ikke lader kolonnernes baggrundsfarve ikke følge med i højden udover de 100%.
Alle tre kolonner er angivet med 100% i højden, men hvis du ser siden i browseren og ændre skærmopløsningen så kolonne 2 bliver for kort (så der kommer scrollbar), følger baggundsfarven som sagt ikke med.
I IE (7) vises siden korrekt.
Hvorfor går det galt, og hvordan kan jeg løse det?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-language" content="da">
<style type="text/css">
html {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color: #4A8EC6;
}
#GlobalContainer {
width: 100%;
height: 100%;
}
#GlobalLeft {
margin-left: 7px;
width: 309px;
height: 100%;
float: left;
}
#GlobalRight {
margin-left: 321px;
margin-right: 7px;
height: 100%;
}
#left {
float: left;
width: 50%;
height: 100%;
}
#right {
float: right;
width: 50%;
height: 100%;
}
</style>
</head>
<body>
<div id="GlobalContainer">
<div id="GlobalLeft" style="background-color: red;">GlobalLeft</div>
<div id="GlobalRight">
<div id="left" style="background-color: lime;">Left<br><br><br><br><br><br><br><br><br><br><br><br><br><br>Mere left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>endnu mere left</div>
<div id="right" style="background-color: orange;">Right</div>
</div>
</div>
</body>
</html>