Antworten auf deine Fragen:
Neues Thema erstellen

DIV mit float-Angabe in umliegenden DIV

Topper

Noch nicht viel geschrieben

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
 

Jormungand

VonAllemEtwas

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

Noch nicht viel geschrieben

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?
:danke:
 

Jormungand

VonAllemEtwas

Da hast du was mißverstanden.
Hier ein Beispiel zum Floaten:
HTML:
<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

Noch nicht viel geschrieben

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
:daumenhoch :danke:
 

patrick_l

Hat es drauf

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

HTML:
<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>
CSS:
.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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.634
Beiträge
1.538.448
Mitglieder
67.555
Neuestes Mitglied
scheflo
Oben