DIV-Verhalten (Floating, umgebendes & nachfolgendes Element)

[sho]

Nabend,
zuerst: Jaha ich weiß, das Thema ist so oft erklärt und es gibt viele viele Beiträge, aber bitte seht mir nach, dass ich trotzdem meinen eigenen Fehler nicht sehe :-):

• Es gibt 3 gefloatete DIVs in einem umgebenden DIV mit nachfolgendem clear statt overflow:hidden. Das äußere soll mitwachsen, damit der Footer darunter immer mit runter rutscht.
  -Wenn das mittlere DIV größer wird durch Inhalt, dann klappt das. Wenn aber das rechte innere größer wird, dann nicht. Im Firbeug sieht man, dass das rechte DIV wiederum nicht mit seinem Inhalt wächst (weitere DIVs mit Text und Bild.) Ich denke, daran liegt es, aber: Warum wächst das rechte innere nicht? :-)

  
<div id="content">  
<div id="left"></div>  
<div id="main">  
<p>Blindtext</p>  
</div>  
<div id="right">  
<div id="box">  
<img src="img/bild.png" />  
<div id="test">  
<img src="img/bild.png" />  
<span> TextTextText</span>  
</div>  
</div>  
</div>  
<div class="clear"></div>  
</div>  
<div id="footer">  
<img src="img/bild.png" />  
</div>  

  
div#content{  
	width:900px;  
	margin-left:auto;  
	margin-right:auto;  
	margin-bottom:20px;  
	/*overflow:hidden;*/  
}  
div#leftcontent{  
	float:left;  
	width:284px;  
	min-height:400px;  
}  
div#maincontent{  
	float:left;  
	width:460px;  
	min-height:400px;  
}  
div#main p{  
	padding:0px;  
}  
div#right{  
	float:left;  
	width:220px;  
	min-height:400px;;  
	/*background:green;*/  
}  
div#box{  
	position:relative;  
	top:64px;  
	width:222px;  
	min-height:100px;  
	padding:0px;	  
}  
div#box img{  
	float:left;  
}  
div#test{  
	margin-left:8px;  
	background:black;  
	height:auto;  
}  
div#footer{  
	width:100%;  
	height:25px;  
	background:red;  
}  

[ChrisB]

Hi,

zuerst: Jaha ich weiß, das Thema ist so oft erklärt und es gibt viele viele Beiträge, aber bitte seht mir nach, dass ich trotzdem meinen eigenen Fehler nicht sehe :-)

Das könnte an dem chaotischen Quelltext liegen.

• Es gibt 3 gefloatete DIVs in einem umgebenden DIV mit [...]

Bitte rücke das ganze erst mal vernünftig ein, damit man die Struktur nachvollziehen kann, ohne sich einen Knoten ins Hirn machen zu müssen.

Und dann zeige uns bitte CSS, das auch zum Problem passt. In dem, was du gezeigt hast, sind bspw. Formatierungen für Elemente #maincontent und #leftcontent drin, die es im HTML gar nicht gibt, dafür wird #left wiederum überhaupt nicht formatiert, was vermutlich nicht die Situation sein soll, die du uns hier beschreibst.

Bitte stelle ein vollständiges, valides Online-Beispiel bereit, welches auch die Bilder enthält, damit ich mir für die nicht auch selber noch Platzhalter basteln muss, um das ganze nachzuvollziehen.

MfG ChrisB

[sho]

Hallo ChrisB,

Webspace zum hochladen mit Bildern gibt es nicht-ich hoffe es ist durch die Original-Einrückungen^^ besser. Hatte den Code umformatiert & Container umbenannt, um zu "verallgemeinern" ;-) .. Mea Culpa ..

<div id="content">  
	<div id="left"></div>  
	<div id="main">  
		<p>Blindtext</p>  
	</div>  
	<div id="right">  
		<div id="box">  
			<img src="img/bild.png" />  
			<div id="test">  
				<img src="img/bild.png" />  
				<span> TextTextText</span>  
			</div>  
		</div>  
	</div>  
	<div class="clear"></div>  
</div>  
<div id="footer"></div>

  
div#content{  
        width:900px;  
        margin-left:auto;  
        margin-right:auto;  
        margin-bottom:20px;  
        /*overflow:hidden;*/  
}  
div#left{  
        float:left;  
        width:284px;  
        min-height:400px;  
}  
div#main{  
        float:left;  
        width:460px;  
        min-height:400px;  
}  
div#main p{  
        padding:0px;  
}  
div#right{  
        float:left;  
        width:220px;  
        min-height:400px;  
        background:green;  
}  
div#box{  
        position:relative;  
        top:64px;  
        width:220px;  
        min-height:100px;  
        padding:0px;  
}  
div#box img{  
        float:left;  
        width:220px;  
        height:20px;  
}  
div#test{  
        margin-left:8px;  
        background:black;  
        height:auto;  
}  
div#test img{  
        width:20px;  
        height:20px;  
}  
div#footer{  
        width:100%;  
        height:25px;  
        background:red;  
}  

[Matthias Apsel]

Om nah hoo pez nyeetz, sho!

Webspace zum hochladen mit Bildern gibt es nicht

Lima-city?

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

Lima-city?

Das Fragezeichen kann weg.

Matthias

[sho]

ui danke..ich habe gar nicht eingeschätzt, dass es ein so schwieriges problem ist, dass es nur gelöst werden kann, indem ich eigens dafür einen webspace einrichte..wow :-(

[Matthias Apsel]

Om nah hoo pez nyeetz, sho!

ui danke..ich habe gar nicht eingeschätzt, dass es ein so schwieriges problem ist, dass es nur gelöst werden kann, indem ich eigens dafür einen webspace einrichte..wow :-(

Ein Beispiel, das sich jeder anschauen und an dem jeder zur Not mal das eine oder andere ausprobieren kann, ist der Problemlösung unbedingt dienlich.

Matthias

[sho]

Hallo Matthias,

Ein Beispiel, das sich jeder anschauen und an dem jeder zur Not mal das eine oder andere ausprobieren kann, ist der Problemlösung unbedingt dienlich.

OK--verständlich. Ich richte mal einen Webspace ein, um beim nächsten Mal gewappnet zu sein, aber für heute habe ich mein Problem gelöst nach 5 Stunden Schlaf und 2 Schluck Kaffee:

Der Fehler lag in der Positionierung des DIVs #box! Ich habe ihm statt "position:relative und top:64px" ein "margin-top:64px" gegeben und alles klappt wunderbar^^. Durch das Positionieren wurde wohl der "Inhalt" nicht mehr als solcher erkannt und somit die Größe nicht mehr beeinflusst. Herrlich :-)