nicht angemeldet
hier eine Frage für echte CSS-Freaks unter Euch: Gibt es eine Möglichkeit, zwei Elemente (Text,Bild...) INNERHALB einer Ebene (div) so NEBENEINANDER zu positionieren, dass der eine linksbündig, der andere rechtsbündig erscheint??? (die äußere Ebene ist flexibel, mit % formatiert)
Nennen wir die beiden "inneren" Elemente mal "links" und "rechts". Definiert man beide als Klassen und verpasst man ihnen ein float:left bzw. float:right, dann ist das Ergebnis im MSIE befriedigend. Im Netscape 6 jedoch fallen mit float positionierte Elemente INNERHALB eines umgreifenden Bereichs aus diesem heraus. (Keine Ahnung, welches Verhalten standardgemäß ist)
Letzteres. Den sehr gut und verständlich geschriebenen CSS2-Standard findest du unter http://www.w3.org/TR/REC-CSS2.
Um deinen übergeordneten Block in der Höhe anzupassen, mußt du unter den beiden <div>s einen dritten setzen, und zwar folgendermaßen:
<div style="border:2px solid black">
<div style="float:left;border:2px dotted green">Linker Block</div>
<div style="float:right;border:2px dotted red">Rechter Block</div>
Text in der Mitte.
<div style="clear:both"></div>
</div>
Mit dem clear:both zwingst du Block 3 unter die beiden float-Blöcke, und da Block 3 innerhalb vom Elementfluss des "großen Ganzen" liegt, passt sich auch die Gesamthöhe an.
Sicherlich irgendwo eine etwas unglückliche Konstruktion, aber das lässt sich leider nicht verhindern.
Noch'n Tipp zu einem ebenso fürchterlichen, verwandten Problem:
Der IE berechnet die Breite von Elementen falsch. Falls du deine beiden Blöcke links und rechts auf die Breite 50% setzt, werden sie im IE nebeneinander dargestellt, Opera und Netscape 6 zeigen sie aber (normalerweise) untereinander an.
Der Grund dafür ist, daß der IE die width-Angabe als Breite des gesamten Elements nimmt, tatsächlich ist das aber nur die des Inhalts. Das bedeutet, daß zu width noch padding, border und margin hinzugezählt werden müssen. Eine Box mit der Angabe "width:50%;margin:20px" innerhalb eines 300 Pixel breiten Elements ist also 150+20=170 Pixel breit, nicht 150 (wie im IE). Deshalb passen zwei 50%-Floats auch nicht so ohne weiteres nebeneinander.
Da es keine Möglichkeit gibt, etwas in der Art "width:50%-20px" zu machen, ist die IMHO beste Lösung, noch'n <div> in das float-<div> reinzusetzen.
Beim Umstieg von LayOut-Tabellen auf CSS-Divs scheint es ganz allgemein ein Problem zu sein, das Verhalten von Ebenen/Abschnitten innerhalb von Divs vorauszusehen bzw. im Griff zu behalten. Wie war das doch bei Tabellenzellen noch nett! Nie kamen Elemente aus der Zelle heraus, allenfalls mal war ein Wort für die Zelle zu lang und ragte nach rechts über den Rand. Die Divs dagegen machen was sie wollen - so kommts mir jedenfalls vor.
Das liegt leider zum Teil auch an der Unfähigkeit -aller- Browserhersteller, CSS2 vollständig bzw. korrekt zu unterstützen.
Gruß,
soenk.e