Problem mit Parent / Child Div

lemmyk · #1 (**permalink**) 04.03.2010, 17:44

Hallo zusammen

Ich stehe als CSS Neuling vor einem Problem, welches ich einfach nicht hinbekomme. Habe bereits lange gegoogelt, viele Beiträge durchgelesen und das Layout auf diverse verschiedene Arten aufgebaut, aber komme einfach nicht auf das gewünschte Ergebnis.

Auf dem Printscreen "Site" seht ihr wie die Seite Grundsätzlich etwa aussieht. Dieser möchte ich nun noch eine Schattierung hinzufügen (am linken und rechten Rand der Seite ein Bild mit Verlauf). Dafür habe ich das Layout wie auf dem PrintScreen "Layout" gestaltet.

Mein Problem bezieht sich nun lediglich auf die Divs content_left (11), content_center_left (12), content_center_right (13) und content_right (14) + die nicht sichtbaren Parent Divs content und dessen Parent Div container. Mein Problem ist, dass ich einfach nicht hinbekomme, dass sich die Divs 11 und 14 der Grösse des Div content_center_right (13) anpassen. Würde ich alles mit statischen Grössen machen, würde es klappen. Für den Div "contet_center_right" brauche ich allerdings eine Variable Grösse (da unterschiedlich viel Text) und somit müssen sich auch die Grössen von den beiden Schattierungsdivs diesem anpassen.

Hier ist der HTML Code:

HTML-Code:

<HTML>
<HEAD>
<TITLE>Z-Design</TITLE>

<link rel="stylesheet" type="text/css" href="style.css">

  <style type="text/css">@import url(modern_ohne_ie.css) all;</style>

  <!--[if IE]>
    <style type="text/css">@import url(ie.css);</style>
  <![endif]-->

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</HEAD>

<BODY>

<div id="container">

	<div id="top">
		<div id="top_left">1
		</div>
		<div id="top_center_left">2
		</div>
		<div id="top_center_right">3
		</div>
		<div id="top_right">4
		</div>
	</div>
	

	<div id="banner">
		<div id="banner_left">5
		</div>
		<div id="banner_center">6
		</div>
		<div id="banner_right">7
		</div>
	</div>
	
	<div id="navi">
		<div id="navi_left">8
		</div>
		<div id="navi_center">9
		</div>
		<div id="navi_right">10
		</div>
	</div>
	
	<div id="content">
		<div id="content_left">11
		</div>
		<div id="content_center_left">12
		</div>
		<div id="content_center_right">13
		Inhalt
		<p>
		Inhalt
		<p>
		Inhalt
		<p>
		Inhalt
		</div>
		<div id="content_right">14
		</div>
	</div>
	
	<div id="footer">
		<div id="footer_left">15
		</div>
		<div id="footer_center">16
		</div>
		<div id="footer_right">17
		</div>
	</div>
	
</div>

</BODY>
</HTML>

Und dies wäre das CSS File:

HTML-Code:

body {
	background-color: #d1d1d1;
	font-size: 11px;
	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	color:#000000;
	padding:0px;
	margin:0px;
	text-align:center;
}



#container {
width: 820px;
height: auto;
margin-left: auto;
margin-right: auto;
background-color:#00FFFF;
text-align:left;
}

div#container {
}


#top {
width: 820px;
height: 73px;
background-color: #FF0000;
float:left;
}
	#top_left {
	width: 10px;
	height: 73px;
	background-color: #FFFF00;
	float:left;
	}

	#top_center_left {
	width: 400px;
	height: 73px;
	background-color: #FF0000;
	float:left;
	}

	#top_center_right {
	width: 400px;
	height: 73px;
	background-color: #0000ff;
	float:left;
	}

	#top_right {
	width: 10px;
	height: 73px;
	background-color: #FFFF00;
	float:left;
	}

#banner {
width: 820px;
height: 140px;
background-color: #FFFF00;
float:left;
}
	#banner_left {
	width: 10px;
	height: 140px;
	background-color: #FF0000;
	float:left;
	}

	#banner_center {
	width: 800px;
	height: 140px;
	background-color: #FFFF00;
	float:left;
	}

	#banner_right {
	width: 10px;
	height: 140px;
	background-color: #FF0000;
	float:left;
	}

#navi {
width: 820px;
height: 22px;
background-color: #FF0000;
}
	#navi_left {
	width: 10px;
	height: 22px;
	background-color: #FFFF00;
	float:left;
	}

	#navi_center {
	width: 800px;
	height: 22px;
	background-color: #FF0000;
	float:left;
	}

	#navi_right {
	width: 10px;
	height: 22px;
	background-color: #FFFF00;
	float:left;
	}


#content {
width:820px;
height:auto;
background-color: #FFFF00;
}
	#content_left {
	width: 10px;
	height:auto;
	background-color: #FF00FF;
	float:left;
	}

	#content_center_left {
	width: 240px;
	height:auto;
	background-color: #0000ff;
	float:left;
	}

	#content_center_right {
	height:auto;
	width: 560px;
	background-color: #00ff00;
	float:left;
	}

	#content_right {
	width: 10px;
	height:auto;
	background-color: #FF00FF;
	float:left;
	}

#footer {
width: 820px;
height: 14px;
background-color: #FF0000;
float:left;
}
	#footer_left {
	width: 10px;
	height: 22px;
	background-color: #FFFF00;
	float:left;
	}

	#footer_center {
	width: 800px;
	height: 22px;
	background-color: #FF0000;
	float:left;
	}

	#footer_right {
	width: 10px;
	height: 22px;
	background-color: #FFFF00;
	float:left;
	}

Hoffe ich habe mich einigermassen verständlich ausgedrückt.

Vielen Dank schon im voraus...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 20:29
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 17:53
CSS Text nebeinander?	carstiee09	CSS	13	13.11.2009 20:18
Problem mit div (float)	Sp33dy G0nz4l3s	CSS	2	29.05.2006 20:13
Problem div in div @ Bottom - unterschiedlicher Abstand	rokk	CSS	5	12.11.2005 00:08