Hallo Miteinander,
ich habe ein kleines CSS-Problem.
Ich habe ein äußeren und 2 innere Container. Der äußere Container hat eine Höhe von 700px. Der innere Container hat die Höhe 100%. Nun geht aber nicht der innere Container bis zum äußeren, so wie von mir gewünscht, sondern bis zum Ende des Browser-Fensters.
Wo liegt das Problem? Warum überlappt der innere den äußeren Container?
Hier mal der Code:
Code:
body{
background-color: grey;
background-image: url(../images/background.jpg);
background-repeat: repeat;
font-family: Tahoma,Verdana,Arial;
font-size: 9pt;
color: #3c3c3c;
margin:0;
}
div.frame{
width: 800px;
border: 1px solid;
border-color: #3c3c3c;
margin-left: auto;
margin-right: auto;
height:700px;
background-color:white;
}
div.banner{
width:800px;
height:125px;
background-color:blue;
background-image: url(../s/banner.jpg);
}
div.bar{
width:800px;
height:30px;
background-image: url(../imasges/bar_dark.jpg);
background-repeat: repeat-x;
background-color:green;
}
div.contLeft{
float:left;
width:180px;
min-height:10px;
height:100%;
background-color: #bbbaba;
}
div.contRight{
float:left;
width:600px;
background-color:red;
padding:10px;
padding-top:20px;
height:100%;
margin:0px;
}
Und die HTML dazu:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body><div class="frame">
<div class="banner"></div>
<div class="bar"></div>
<div class="contLeft"></div>
<div class="contRight">Test</div>
</div>
</body>
</html>
04.08.2009, 15:10
Container ineinander Schachteln
Ähnliche Themen
Linear-Darstellung
