float in float und clear
0 0 
Detlef G.
float in float und clear
Hallo Forum,
ich habe mich zwar schon durch einige Beiträge hier gelesen, aber so ganz ist es mir immer noch nicht klar.
Ich habe mir ein 3 Spalten Layout mittels floats zusammengebaut. Dies läuft auch ohne Probleme.
Allerdings will ich jetzt eine Liste von Beträgen darstellen, in denen auch wiederrum Bilder und andere Elemente floate.
also quasi sowas im ganz Groben wie:
----------------------------------------------
<div id="#left">
<!-- Menü und andere Blöcke --->
</div>
<div id="right">
<!-- wieder etwas Inhalt -->
</div>
<div id="center">
<div class="block">
<div class="block-title">Titel</div>
<div class="block-content">
<div class="img-float-left">
<img ... />
</div>
Block ihalts text....
</div>
</div>
</div>
----------------------------------------------
Nach jedem Block in der Mitte würde ich gerne ein clear machen, damit bei einem grossen Bild und wenig Text der neue Block nicht mit dem darüberliegenden img-float ins Gehege kommt.
Wenn ich einfachein clear both mache, werden ja auch #left und #right gecleard.
Ein Tip, den ich gefunden habe, war, dass ich .block-content auch floate.
Allerdings klappt das auch nicht so, wie ich das gerne hätte.
Gibts da noch andere Möglichkeiten?
Oder habe ich etwas falsch gemacht?
Vielen Dank
Gruß
Thomas
-
hi,
http://www.google.de/search?hl=de&q=easy+clearing
gruss
timex-
Hallo
http://www.google.de/search?hl=de&q=easy+clearing
IMO trifft das nicht mein Problem.
Es geht mir ja nicht um ein clearing ohne extra markup, sondern um ein clearing von verschachtelten float-elementen.
das Innere float soll gecleared werden, das äußere soll aber weiterhin besethen bleiben.
Gelesen habe ich, dass man dazu das innere in ein nicht-statisches element einbetten muss. Dies wäre z.B. wieder ein float.
Stimmt das so?
Kann man das auch eleganter lösen?
-
-
Hallo Thomas
Allerdings will ich jetzt eine Liste von Beträgen darstellen, in denen auch wiederrum Bilder und andere Elemente floate.
Es gibt zwei grundsätzliche Möglichkeiten:
1. Wenn die Höhe der gefloateten Elemente bekannt ist, kann für den umschließenden Block diese als Mindesthöhe (min-height; nur für IE height) gegeben werden.
2. Der umschließende Block bekommt einen eigenen Block Formatting Contexts und im IE hasLayout. float-Umgebungen verschachteln
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hi Detlef
Es gibt zwei grundsätzliche Möglichkeiten:
- Wenn die Höhe der gefloateten Elemente bekannt ist, kann für den umschließenden Block diese als Mindesthöhe (min-height; nur für IE height) gegeben werden.
Diese scheidet leider aus.
- Der umschließende Block bekommt einen eigenen Block Formatting Contexts und im IE hasLayout. float-Umgebungen verschachteln
Mit Overflow klappts wirklich. Und es ist viel einfacher als floats ineinander zu schachteln.
Vielen Dank.
Gruß
Thomas
-