Mal wieder ein Float-Problem

chuqa

Hallo allerseits,

ich habe bei mir auf einer Seite mehrere div-Container untereinander. In dem Div-Container können Bilder sein, um die per float:left dann Text fließen soll. Außerdem haben die Bilder eine maximale Höhe und Breite. Ist der Text nun aber kürzer als das Bild, fließt das Bild praktisch aus dem div-Container hinaus. Kann mir jemand sagen, wie ich den div-Container so auf die Höhe strecke, dass der auf jeden Fall so hoch wie das Bild ist?
Vielleicht hilft ja der Code etwas:
Die div-Container:

HTML

<div class='c'>
   <img src='pics/pic1.jpg' alt='Pic' />
   <h2>bla</h2>
   <p>blablabla</p> 
</div> 
<div class='c'>
   <img src='pics/pic2.jpg' alt='Pic' />
   <h2>Blubb</h2>
   <p>blubbblubbblubb</p> 
</div>

Das CSS dazu:

HTML

div.c{
    clear: left;
    margin-top: 20px;
    height: 100%;
    border-top: 1px rgb(153,204,255) solid;
    border-left: 2px rgb(153,204,255) solid;
    text-align: left;
    line-height: 1.5em;

}


div.c img{
    max-width: 300px;
    max-height: 300px;
    float: left;
    margin: 5px;
}

Alles anzeigen

wernerdeluxe

Kannst du mal was komplettes hochladen, wo auch die bilder drinn sind?
Ich würde dir ja helfen, hab aber keine Lust mir das jetzt selbst nachzubauen.

Davon, dass deine Bilder eine feste Größe haben, sieht man nichts.
Zumindest ist in deinem HTML Code keine Größe angegeben

Gruß
Lukas

sejuma

Bevor du den Div schließt, welcher die gefloateten Elemente beinhaltet musst du entweder clearen, oder dem umfassenden Div ein

Code

overflow: auto;

zuweisen.
Siehe http://www.ohne-css.gehts-gar.net/0042.php

koslowski

Hi,

Zitat von sejuma
Bevor du den Div schließt, welcher die gefloateten Elemente beinhaltet musst du entweder clearen, oder dem umfassenden Div ein
Code
overflow: auto;
zuweisen.
Siehe http://www.ohne-css.gehts-gar.net/0042.php

die overflow-Methode zum Einschließen von Floats ist verblüffend einfach und wie sich in den letzten Jahren herausstellte verblüffend ungeeignet, da sie älteren Geckos viele Probleme bereitet.

Wenn man denn ein leeres div zum clearen nutzt, sollte man zumindest ein geschütztes Leerzeichen hineinsetzen:

Code

<div class="clear">&nbsp;</div>

Ohne dieses Leerezeichen können mit älteren Browsern ebenfalls Probleme auftreten, weil dann das komplette div gern mal ignoriert wird.

sejuma

Gibt es denn eine Übersicht, in welchen Browserversionen das overflow nicht funktioniert? Hab's bisher leider nur im FF3 und IE7 getestet.

koslowski

Moin,

Zitat von sejuma

Gibt es denn eine Übersicht, in welchen Browserversionen das overflow nicht funktioniert? Hab's bisher leider nur im FF3 und IE7 getestet.

funktionieren auf eine Art und Weise schon, allerdings zieht das eine Menge Probleme nach sich.
Erstmal sollte man immer bedenken das durch die overflow-Eigenschaft ein "Block Formatting Context" (BFC) generiert wird.

Nimm z.B. ein scheinbar einfachen Fall wo ein Float einen linken inneren Float und daneben einen overflow:hidden-Block enthält.
Wenn dieser Block einen linken margin enthält, wo kommt dieser margin zum Liegen?

Beim IE6, IE7, FF3 verschwindet der margin hinter dem Float.
FF 2.0.0.14 und Opera 9.5 machen eine margin-Lücke zwischen Float und BFC.
Opera 9.24 und Safari 3.1.2 machen die Lücke rechts vom BFC.

Laut Spezifikation muss der margin hinter dem Float verschwinden.
Es ist nicht definiert ob nun der BFC neben dem Float zum Liegen kommen soll oder unter den Float rutschen kann.
Es ist sogar gestattet den BFC in der Breite zu kürzen, damit er neben den Float paßt, aber es wird nicht definiert wie das zu geschehen hat.

Solange sich die Spezifikation nicht genauer ausdrückt und die Browserhersteller ihre Probleme mit der overflow-Eigenschaft haben, sollte man diese nur mit viel Bedacht wählen.

Einen guten Einblick und somit eigentlich ein "Must-Have" für den fortgeschrittenen CSS-Anwender bietet, wie ich schon mal erwähnte, "Friccas" und "IChaos" Buch: Fortgeschrittene CSS-Techniken

sejuma

Vielen Dank für deine ausführlichen Infos.
Werd ich mir mal näher ansehen.

Tags