✔ Übergeordnetes div streckt sich nicht mit.

[Spelmann]

Hallo, wie kann ich es erreichen, daß das übergeordnete div mit der id="container" mit dem Content mitgestreckt wird?

HTML Code:

<div id="container">
    <div id="spalte-links"></div>
    <div id="spalte-mitte">
        <div id="kopf"></div>
        <div id="content" class="text-norm" style="text-align:left">
        Ganz viel Text...
        </div>
  </div>
</div>

CSS:

#container{
width:920px;
height:100%;
background-image:url(loop.jpg);
text-align:center;
margin:auto;
}
	#spalte-links{
	width:188px;
	height:100%;
	background-image:url(saeule.jpg);
	background-repeat:no-repeat;
	float:left;
	}
	#spalte-mitte{
	width:732px;
	height:100%;
	float:left;
	}
		#kopf{
		width:732px;
		height:160px;
		background-image:url(kopf.jpg);
		float:left;
		}
		#content{
		position:relative;
		width:600px;
		height:100%;
		margin-left:45px;
		}

Ich stehe gerade völlig auf dem Schlauch.
Im Augenblick sieht das Ganze so aus:
http://www.kideol/test/test.php

Wie immer schreibe ich erst kurz vor dem Verzweifeln, und würde mich darum sehr über Hilfe freuen.

 

[Carrear]

bei dem übergeordneten div tag: overflow: visible;

 

[Spelmann]

Hallo Carrear,

ne das bringt leider nix.

 

[Maik]

Hi,

die Floatumgebung muss zum Abschluß noch "gecleart" werden - siehe hierzu auch http://positioniseverything.net/easyclearing.html.

Zudem muss für die modernen Browser (Firefox, Opera & Co.) das DIV #container mit einer Mindesthöhe ausgestattet werden:

#container{
width:920px;
min-height:100%;
height:auto !important;
height:100%;
background-image:url(loop.jpg);
text-align:center;
margin:auto;
}


.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

<div id="container" class="clearfix"> ... </div>

 

[Carrear]

Welches streckt sich denn mit? Eine Alternative wäre den div tag mit id spalte-mitte einfach absolut auszurichten. Versuch mal das float: left; rauszumachen und sieh was passiert.

 

[Spelmann]

Hallo Maik.

Bei deinem Vorschlag zerlegt es mir gerade das komplette Layout. Ich verstehe auch nicht alles davon.

@Carrear
Die Frage ist ja nicht, was sich mitstreckt, sondern was dies eben nicht tut. Nämlich das div container mit dem geloopten Hintergrund.

Ich bin immer noch recht ratlos.

 

[Maik]

Dann wende noch zusätzlich zu meinem "korrekten" Vorschlag diese Regeln an:

#spalte-links{
        width:188px;
        height:100%;
        background-image:url(saeule.jpg);
        background-repeat:no-repeat;
        float:left;
        margin-right:0 !important;
        margin-right:-3px;
        }

#spalte-mitte{
        /*width:732px;*/ /* auskommentiert = deaktiviert */
        height:100%;
        /*float:left;*/ /* auskommentiert = deaktiviert */
        margin-left:188px !important;
        margin-left:185px;
        }

 

[Spelmann]

Hallo Maik

Das sieht soweit schon mal gut aus.
Das div container erstreckt sich nun samt geloopter Grafik mit dem div content.

Jetzt habe ich nur die Nebenwirkung, daß das div spalte-links nicht mehr sichtbar ist.

Woran kann das liegen?

 

[Spelmann]

Um genau zu sein siehts nun so aus.
Im IE siehts aus wie es soll.
Im Firefox und in Netscape wird das div spalte-links nicht angezeigt.
Unter Opera plötzlich gar keine Grafiken der divs mehr angezeigt.

Sackgasse?

 

[Maik]

Gib mal dem DIV #spalte-links eine feste Höhe, die der Bildhöhe entspricht:

#spalte-links{
        width:188px;
        height:532px;
        background-image:url(saeule.jpg);
        background-repeat:no-repeat;
        float:left;
        margin-right:0 !important;
        margin-right:-3px;
        }

Opera (9.23) zeigt bei mir die Hintergrundbilder an.