Bokse med 100% height opfører sig underligt og bliver ikke trukket ned
Goddag eksperter,Jeg plejer ikke at have problemer med at opbygge mine sider vha. <div>'s og styling, men er stødt på et mystisk problem og har stirret mig helt blind på det..
-----------------------------------------------------------
Jeg har opbygget en simpel side således:
-----------------------------------------------------------
<!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</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="content">
<div class="contentcenter"></div>
<div class="contentspace"></div>
<div class="contentright"></div>
<div style="clear:both;"></div>
</div>
</body>
</html>
-----------------------------------------------------------
Med følgende styling:
-----------------------------------------------------------
.content{
width: 800px;
height: 100%;
background-color: #000000;
}
.contentcenter{
width: 500px;
height: 500px;
background-color: #FF0000;
float: left;
}
.contentspace{
width: 100px;
height: 100%;
background-color: #000FFF;
float: left;
}
.contentright{
width: 200px;
height: 100%;
background-color: #CCCCCC;
float: left;
}
Den ser ud som her: www.valuable.dk/test/
Men af en eller anden mystisk grund opfører den sig ikke som planen.. Jeg har sat height på boksene til 100% foruden "contentcenter" boksen. Det jeg gerne vil have siden til at gøre er at trække den blå (contentspace) og grå (contentright) baggrundsfarve med helt ned til den røde (contentcenter). Men jeg begriber ikke hvorfor den ikke gør det?
Kan det have noget med DOCTYPE-deklarationen at gøre? Jeg har som sagt ikke haft lignende problemer før, og det er mig virkelig en gåde, hvorfor den ikke gør som jeg vil have den til. Jeg får desuden forskellige resultater alt efter om jeg kører siden på localhost eller webhotel, hvilket også bare er et stort mysterie for mig. Se selv her:
http://www.valuable.dk/test/test_ie8_localhost.jpg
http://www.valuable.dk/test/test_ie8_webhotel.jpg
