Problems with CSS Layout

Hi everyone...
maybe I´m stupid or maybe I´m too blind, or maybe I´m both of that... :(

I want to construct a page, wich contains a Head-Grafic, with a Stripe on the left side wich is 100% height and contains some descriptions.
It should have right to the left Stripe a Navigation bar and under that a Content-Area.
The Side sould be always 100% height of the Browser-window. Even if it doen´t contain any content.

Everything seems to be fine and all is working in IE 6 and FireFox 1.0.4, but one thing I can´t get to work:
It seems that the Head Area is above the 100%-Area. Therefore the total page ist about 100% + 128px height.
I can´t see the error... :(
What do I make wrong?

Here is the Example-Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="de">
<head>
 <title>TEST</title>
 <style type="text/css">
<!--
html{
margin:0;
padding:0;
min-height:100%;
height:100%;
}
body{
background-color: #000000;
   color:#000000;
FONT-FAMILY: "Verdana", "Arial", sans-serif;
   margin:0;
   padding:0
min-height:100%;
height:100%;
   }
#page {
background-color: #333333;
   border: none;
text-align: left;
margin: 0px auto;
padding: 0;
width: 792px;
min-height:100%;
height:100%;
}
#Head {
background-color: #0000FF;
height: 128px;
width: 792px;
}
#Main {
background-color: #BBBBBB;
min-height:100%;
min-height:100%;
height:100%;
width: 792px;
   }
#BackMain{
padding: 0;
margin-left: 23px;
margin-right: 23px;
min-height:100%;
height:100%;
}
#Content {
padding: 1px;
margin-left: 10px;
margin-right: 10px;
min-height:100%;
height:100%;
}
#LeftTitle{
background-color: #A90081;
border-color: #000000;
float:left;
padding:0px;
border:1px solid;
width:10px;
   margin-top: 10px;
min-height:100%;
height:100%;
   }
#Navi{
background-color: #A90081;
border-color: #000000;
padding:0px;
border:1px solid;
height:20px;
   margin-top: 10px;
   margin-left: 20px;
   }
.ContentBoxHead{
background-color: #A90081;
border-color: #000000;
padding:3px;
border:1px solid;
height:10px;
   margin-top: 15px;
   margin-left: 20px;
   }
.ContentBoxTXT{
background-color: #F7F1F1;
border-color: #000000;
padding:3px;
border-left:1px solid;
border-right:1px solid;
border-bottom: 1px solid;
height:10px;
   margin-top: 0px;
   margin-left: 20px;
   }
.Headline {
 color: #FFFFFF;
 font-size: 14px;
 text-align: left;
 font-weight: bold;
}
.Text {
 color: #000000;
 font-size:11px;
 font-weight: bold;
}
-->
 </style>
</head>
<body>
 <div id="page">
 <div id="Head"></div>
 <div id="BackMain"><div id="Content">
 <div id="LeftTitle"><div class="Headline">A<br>R<br>E<br>A<br>S</div></div>
 <div id="Navi"><div class="Headline">NAVI</div></div>
 <div class="ContentBoxHead"><div class="Headline">HEADLINE</div></div>
 <div class="ContentBoxTXT"><div class="Text">TEXT</div></div>
 </div></div>
 </div>
</body>
</html>

Problems with CSS Layout

I am blind to find the error...

Dynamix

victor

Dynamix

vegaec

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week