Problem/Frage: Spezielle Positionierung von div mit CSS

Zwommel · #1 (**permalink**) 01.10.2008, 15:04

Hallo,

ich möchte ein eigentlich recht einfaches Layout erstellen (Hintergrundfarben dienen nur zur besseren Übersicht):

CSS

Code:

body {
	margin:0px;
}
#outerWrapper {
	display:block;
	width:100%;
	height:100%;
}
#innerWrapper {
	width:990px;
	background:#CCCCCC;
}
#contentWrapper {
	width:810px;
	margin-right:10px;
	float:left;
	vertical-align:bottom;
}
#header {
	background:#00CCCC;
	width:990px;
	height:150px;
	float:right;
}
#content {
	background:#996666;
	width:810px;
}
#navigation {
	background:#FFCC66;
	width:170px;
	height:500px;
	float:right;
}
#footer {
	background:#000066;
	width:990px;
	height:30px;
	float:right;
}
#primary {
	width:810px;
	height:20px;
	background:#FF0000;
}

HTML

HTML-Code:

<div id="outerWrapper" align="center">
	<div id="innerWrapper">
	
		<div id="header">Header</div>
		
		<div id="contentWrapper">
			<div id="primary">Primary</div>
			<div id="content">Content</div>
		</div>
		
		<div id="navigation">Navi</div>
		
		<div id="footer">Footer</div>
		
	</div>
</div>

Ich würde nun sehr gerne das <div id="primary">-Element zwar im Quelltext an aktuellen der Stelle behalten, nur soll es bei der Anzeige im Browser unter das <div id="content">-Element rücken. Leider ist die Höhe von <div id="content"> variabel, genau wie die der Navigation. Ich hab schon zig Sachen ausprobiert, jedoch ohne Erfolg. Ist es überhaupt möglich?
Dazu sei noch gesagt, dass es ich es nicht erst im Nachhinein mit Javascript positionen möchte.

Ich bin über jeden Hinweis dankbar.

Grüße,
Zwommel

heiko_rs · #2 (**permalink**) 01.10.2008, 15:48

#contentWrapper bekommt pos. rel. und #primary pos. abs. mit bottom: 0; (Du musst natürlich Patz dafür schaffen).

Zwommel · #3 (**permalink**) 02.10.2008, 16:50

Vielen Dank.
Funktioniert wunderbar! Die Höhe ist dynamisch... getestet und läuft im FF, IE6 und Safari!

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
Div 100%-X Höhe Problem, ohne absolute Positionierung	xblax	CSS	8	28.10.2010 01:02
Schriftfarbe in den Eintragungsfeldern von jforms	Steveislucky	CSS	2	16.03.2010 10:59
div mit css über andere elemente platzieren	ping	CSS	6	20.08.2009 13:54
div positionierung	bw	CSS	20	03.06.2004 18:52