Parent DIV soll mit der Höhe seines Childs wachsen

Tekkla · #1 (**permalink**) 19.11.2009, 17:15

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>

Tekkla · #2 (**permalink**) 19.11.2009, 17:49

Okay. Selbst gelöst. Mann doe! Position nimmt Elemente aus dem Textfluss und mit Floats muss man am Ende ein clear:both einbauen. Da wird man ja kirre bei.

http://www.tekkla.de/test2.html

Smartsoul · #3 (**permalink**) 19.11.2009, 18:27

Zitat:

Zitat von Tekkla

Da wird man ja kirre bei.

Ging mir auch schon so und nicht nur einmal.

Es dauert schon eine Weile bis man die Konzepte hinter CSS halbwegs verstanden und später auch verinnerlicht hat.

Aber es ist immer wieder fein, wenn es nach Try and Error dann doch irgendwann funktioniert.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
Header entfernen	tripple	CSS	17	15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms	Steveislucky	CSS	2	16.03.2010 10:59
CSS Text nebeinander?	carstiee09	CSS	13	13.11.2009 19:18