Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 19.11.2009, 18:15
Tekkla Tekkla ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2009
Beiträge: 2
Tekkla befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links