Parent DIV soll mit der Höhe seines Childs wachsen
Wie bekomme ich das hin, dass mein Div mit Namen "bottom" automatisch mit der Höhe seine Kindes mit Namen "content" wächst?
Habe dazu mal ein Beispiel erstellt: Layouttest
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Layouttest</title>
<style type="text/css">
#wrapper {
margin: 0px auto;
width: 1200px;
}
#top {
background: #CCC;
height: 162px;
border-bottom: 2px solid #666;
}
/* the bottom section */
#bottom {
position: relative;
background: #EEE;
border-left: 2px solid #666;
border-right: 2px solid #666;
border-bottom: 2px solid #666;
}
#menue {
position: absolute;
right: 20px;
top: 0px;
width: 590px;
height: 30px;
border: 1px solid #333;
border-top: 0px;
background: #FFFF00;
}
#content {
position: absolute;
top: 40px;
right: 20px;
width: 590px;
border: 1px solid #333;
background: #FF00FF;
}
#info {
position: relative;
left: 20px;
top: 20px;
width: 200px;
border: 1px solid #333;
background: #33FF33;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">TOP</div>
<div id="bottom">
BOTTOM: Soll mit den folgenden 3 DIVs wachsen
<div id="menue">MENUE</div>
<div id="content">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 id="info">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>
|
