clear:left wirkt auf alle Div's links davon

[halla]

Hallo,

ich bin hier auf ein Problem gestoßen, für das ich leider keine Lösung weiß:
http://halla.homelinux.net/

Die linke Spalte #sidebar ist per float:left formatiert, die rechte Spalte #sidebar2 per float:right. Die mittlere Spalte hat entsprechende margins nach rechts und nach links.
Enthält ein Posting ein Bild, so wird per float:left für dieses Bild ein Umfließen des Textes erzeugt (beim Runterscrollen finden sich einige Einträge mit Bildern)
Die Links am Ende eines jeden Postings ("Gepostet in..| Kommentare") .postmetadata sind mit einem clear:left formatiert. Damit soll verhindert werden, daß bei einem Posting mit Bild der nachfolgende Text anderer Posting zu weit nach oben rutscht.

Nun tritt aber ein Effekt auf:
Ist ein Posting kürzer als die linke Spalte, scheint das clear:left in .postmetadata zu bewirken, daß ebendiese Metadaten _unter_ die Höhe der linken Spalte gezogen werden...
Zu beobachten ist das bspw. am obersten Posting ("Montag morgen"), je höher die Auflösung desto deutlicher wird es.

Hat jemand eine Idee wie man das verhindern kann?
Sodaß das clear:left in .postmetadata _nur_ für ein im Posting befindliches Bild gilt?

Vielen Dank für eure Hilfe,
Grüße,
Daniel

[Terry]

Hallo Daniel,

das ist leider so und läßt sich nicht verhindern.

Was du tun kannst:

-Wäre der mittlere Container selber ein float, dann würde es gehen. Dazu müßte er aber eine definierte Breite haben. Geht also nicht bei fluid-layout wie bei dir.

-Du könntest die beiden Seitencontainer auch absolut positionieren - dann tritt das Problem auch nicht auf. Dann mußt du aber sicher stellen, dass der mittlere Container immer höher ist als die Randcontainer, denn sonst bekommst du Ärger mit dem Footer.

-Du clearst nicht nach den Bildern. Der Nachteil ist, dass du bei wenig Text und großem Bild dann Probleme beim nachfolgenden Artikel bekommst.

So die ultimative Lösung gibt es also leider nicht.

[halla]

Hi Terry,

erstmal danke für die (wie immer) echt gute und schnell Antwort.
Auch wenn mir gar nicht gefällt, was Du da schreibst, sowas in der Art hatte ich schon befürchtet ;-)

Zitat von Terry

-Wäre der mittlere Container selber ein float, dann würde es gehen. Dazu müßte er aber eine definierte Breite haben. Geht also nicht bei fluid-layout wie bei dir.

Ja, das sehe ich auch so. Zumindest will ich nicht vollständig auf das fluide Layout verzichten.
Alternative: Ich bringe die linke Spalte auf eine feste Breite und floate sie links. Die mittlere Spalte bekommt eine variable Breite, einen fixen Margin zum linken Rand hin und wird ebenfalls links gefloatet.
ein clear:left innerhalb der mittleren Spalte müßte dann wie erhofft funktionieren, oder?

Zitat von Terry

Du könntest die beiden Seitencontainer auch absolut positionieren - dann tritt das Problem auch nicht auf.

Oha - das klingt interessant. #sidebar und #sidebar2 also einfach ein position:absolute zusätzlich verpassen und gut iss' , oder wie meinst Du?

Zitat von Terry

Du clearst nicht nach den Bildern. Der Nachteil ist, dass du bei wenig Text und großem Bild dann Probleme beim nachfolgenden Artikel bekommst.

Nix gibts :-) Das sieht dann total komisch aus, und gerade durch das fluide Layout geht das bei ner hohen Auflösung echt sehr, sehr schnell.

Vielen Dank für jede Hilfe,
Grüße,
Daniel

[Terry]

Zitat von halla

Alternative: Ich bringe die linke Spalte auf eine feste Breite und floate sie links. Die mittlere Spalte bekommt eine variable Breite, einen fixen Margin zum linken Rand hin und wird ebenfalls links gefloatet.

Floats brauchen zwingend eine Breite. Jedenfalls in CSS2. In CSS 2.1 soll das wegfallen, aber es gibt ein paar noch lebende Browser, die mit floats ohne Breite Probleme haben. Ist also essig mit fluid Layout.

Oha - das klingt interessant. #sidebar und #sidebar2 also einfach ein position:absolute zusätzlich verpassen und gut iss' , oder wie meinst Du?

Nein - nicht zusätzlich - statt dessen. Float und absolut positionieren schließt sich gegenseitig aus. Du mußt dann nur eine Startposition für die Container angeben, was aber kein Problem sein sollte.

Du brauchst dann halt nur min-height für den mittleren Container (für den IE halt height), damit der immer höher ist als die beiden äußeren.

[halla]

hi terry,

danke, super, jetzt klappt es !!

aber jetzt macht der IE schon wieder mukken...
naja, das kommt in ein neues Posting - auf jeden fall hast du mir schon mal super geholfen. Vielen Dank !!!!