Hallo,
ich möchte, daß die eigentlichen DIVs von einem Container umschlossen werden. Sonst habe ich mit floats gearbeitet und ein clearendes Element nach den Hauptdivs genutzt, damit der Container mitwächst.
Diesmal ist das Design aber etwas verschachtelt, daher habe ich die DIVs positioniert. Nun wächst aber der umschliessende Container nicht mehr mit.
Irgendwie stehe ich auf dem Schlauch...
Code:
<!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>Unbenanntes Dokument</title>
<link href="sytle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="logo">Tolles Logo
</div>
<div id="top">Tolles Menü
</div>
<div id="right">
</div>
<div id="left">Tolles Menü
</div>
<div id="flex">Tolles Bild </div>
<div id="lang">
</div>
<div id="main">Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text </div>
</div>
</div>
</body>
</html>
Code:
@charset "UTF-8";
/* CSS Document */
html{
min-height: 101%;
}
table {
border-spacing: 0px;
}
td {
margin: 0px;
padding: 0px;
}
tr {
margin: 0px;
padding: 0px;
}
img {
border: 0px;
margin: 0px;
padding: 0px;
}
address {
font-style: normal;
color: #ff4400;
}
.readon {
margin: 0 0 0 15px;
font-size: 7pt;
text-transform : uppercase;
}
body{
font-size: 12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
margin: 0px;
padding: 0px;
}
#container{
width: 832px;
margin: 0 auto;
margin-top: 0px;
background-color: #33FF00;
}
#wrapper {
width: 816px;
margin: 0 auto;
margin-top: 0px;
background-color: #fbe7c5;
position: relative;
top: 0px;
left: auto;
}
#logo{
width: 253px;
height: 184px;
padding: 0px;
margin: 0px;
background: #663300;
border-bottom: 10px solid #8c6640;
position: relative;
}
#top{
width: 514px;
height: 174px;
padding: 0px;
margin: 0px;
background: #663300;
position: absolute;
top: 0px;
left: 253px;
}
#right{
width: 49px;
height: 184px;
padding: 0px;
margin: 0px;
background: #663300;
position: absolute;
top: 0px;
right: 0px;
border-bottom: 10px solid #8c6640;
}
#left{
width: 253px;
height: 326px;
padding: 0px;
margin: 0px;
background: #fbe7c5;
position:absolute;
top: 194px;
left: 0px;
border-bottom: 10px solid #990000;
}
#flex{
width: 514px;
height: 356px;
padding: 0px;
margin: 0px;
background: #ffffff;
position: absolute;
top: 174px;
left: 253px;
}
#flex img {
border: 0px;
margin: 0px;
padding: 10px;
}
#lang{
width: 49px;
height: 326px;
padding: 0px;
margin: 0px;
background: #fbe7c5;
position: absolute;
top: 194px;
right: 0px;
border-bottom: 10px solid #990000;
}
#main {
width: 816px;
padding: 0px;
margin: 0px;
background: #990000;
position: absolute;
top: 530px;
left: 0px;
color: #ffffff;
}