DIV mit float-Angabe in umliegenden DIV

[Topper]

Hallo,
ich habe folgendes Problem: Ich habe ein Layout mit mittiger Ausrichtung, dessen Höhe sich je nach Inhalt anpassen soll. Es gibt eine Umrandung mit Schatteneffekt, darin beginnt es oben mit einem Bild, darunter gefolgt von der Menüleiste. Die Höhenanpassung funktioniert bis hierher.
Nun soll ein zweispaltiges Layout folgen und ich möchte das nicht mit ner "table" machen, sondern mittels DIVs. Damit diese DIV nebeneinander liegen, muss ich "float" zuweisen...und hier beginnt das Problem: Sobald float ins Spiel kommt, passt sich das umliegende DIV nicht mehr an - die DIVs liegen zwar nebeneinander, aber "laufen" aus dem Layout nach unten raus...

Ein weiteres Problem für mich ist auch, dass die beiden nebeneinander liegenden DIVs die gleiche Höhe haben sollen, d.h. das je nach Inhalt das höhere DIV auch die Höhe das anderen DIVs vorgibt.
Vielleicht wirds so verständlicher: Ich brauche ein Layout, das aussieht wie eine Tabelle mit 2 Spalten und einer Zeile. Den Zellen ist dabei ein Hintergrund (ein Bild mit Farbverlauf) zugewiesen. Wenn eine Zelle mehr Inhalt hat, verlängert sich die Tabelle nach unten und passt die andere Zelle automatisch höhenmäßig an.

Ich bin sicher, dass es dafür einen Workaround gibt - kann mir da jemand helfen?

Big THX, Topper

 

[Enigmon]

Schau mal hier:


LG
Thomas

 

[Ilse_Schnick]

...n bisschen Code wäre schön...

 

[Jormungand]

Zu Punkt 1 gibt es eine Regel:

Wer floated muss auch clearen.

Setze ans Ende einfach z.B. einen leeren DIV-Container mit clear:left; (oder both oder right).
Wenn du nicht clearst, kollabiert der äußere Container.

Beim zweiten Punkt kannst du beide Spalten und dein clearendes Element in einen weiteren Container mit deinem Hintergrundbild legen. Der außen liegende Container richtet sich dann automatisch nach dem größten Element (vorausgesetzt die Spalten sind gecleared )

 

[Topper]

Aaaah
Also so?

<div style=width:900px;">
Oberer Inhalt mit Bild und Menüleiste

<div style=width:200px; float:left; background-image:url(boxsmall.png);">Inhalt 1</div>
<div style="clear:left;"></div>

<div style=width:700px; float:left; background-image:url(boxbig.png);">Inhalt 2</div>
<div style="clear:left;"></div>

</div>

Wie müßte ich dann noch ein DIV drumrum legen, damit der aussen liegende Container sich anpaßt?

 

[Jormungand]

Da hast du was mißverstanden.
Hier ein Beispiel zum Floaten:

<div id="header">...</div>
<div id="content">
     <div id="spalte1">Inhalt Spalte 1</div>
     <div id="spalte2">Inhalt Spalte 2</div>
     <div class="clearen"></div>
</div>

Im Header hast du das Bild mit Menüleiste. In Content legst du das Hintergrundbild. Wenn nämlich Spalte 1 oder Spalte 2 größer wird, wächst der Content Container automatisch mit. Innerhalb des Content Containers platzierst du deine Spalten Container und floatest sie. Du kannst beliebig viele Container floaten, bis die Gesamtbreite erreicht wird, ab da wird umgebrochen. Das clearen bedeutet, dass ab jetzt nicht mehr nebeneinander platziert werden soll. Wenn du float:left; verwendest, kannst du es mit clear:left; aufheben, gleiches bei float:right; zu clear:right;. Eine Mischung von floats kannst du mit clear:both; aufheben. Soweit zum Floaten.

Wenn ich aber deinen Code anschaue, willst du für jede Spalte ein eigenes Hintergrundbild haben. Das geht nur, indem du entweder beiden Containern eine feste Höhe gibst, oder gleich beide Spaltenbilder zu einem großen Bild machst und es stattdessen im Content verwendest. Mehr Lösungen kenn ich leider nicht.

 

[Topper]

Nein, das ist völlig okay so, dank dir sehr. Ich muss also nur einmal clearen - da hatte ich daneben gehauen.
Mein eigentliches Problem war tatsächlich das getrennte Hintergrundbild, wodurch man halt sofort sah, dass die Spalten unterschiedlich hoch waren. Ich hatte sogar schon eine Möglichkeit gefunden, ohne clearen (das kannte ich bisher noch nicht *ups*) den Kollaps des Contents zu verhindern, indem ich den Footer "vor den floats hergeschoben habe".
Aber jetzt mach ich's richtig

 

[patrick_l]

Kurz und knapp, mach die einzelnen Divisions mit Hilfe von CSS zu einer Tabellenzelle bzw. gebe diesen genau dieses Verhalten mit.

<div class="row">
  <div class="col">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
  </div>
  <div class="col">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
  </div>
</div>

.row {display:table-row;}
.col {max-width:400px; display:table-cell;}
.col:first-child {background-color:rgba(95,95,95,0.2);}
.col:last-child {background-color:rgba(95,95,95,0.6);}

Liebe Grüße, Patrick