Diverse Fragen zu "float" (Summe in der Breite, fixieren usw.)

[Conny]

Hallöchen ihr,

ich habe ein paar Fragen zur "float"-Angabe. Und zwar benutze ich das an sich ganz gerne, durchschaue aber noch nicht so ganz, wie es sich z. B. mit den divesen Breitenangaben aufsummiert, wenn paddings und margins dazu kommen und weiß vor allem nicht, wann welcher Browser wie stark reagiert.

Ein Beispiel: Angenommen ich mache drei Spalten, jeweils als divs und sage der ersten float:left, width:200, der zweiten float:right, width:200, dann wird die erste ja ganz links an den Bildschirm gesetzt, die zweite ganz rechts und die dritte Spalte würde automatisch den ganzen Rest zwischen den beiden Flächen einnehmen. Je nach Bildschirmgröße und Auflösung wäre dieser dritte Bereich halt entsprechend unterschiedlich groß.

Nun ist es aber ja so: wenn ich in diesen dritten Bereich z. B. ein Bild einfüge, das breiter ist als der zur Verfügung stehende Platz, dann wird diese dritte Spalte ja automatisch nach unten geschoben, unter die zwei anderen. (Zumindest passiert mir das im IE gerne.) Gibt es da irgendwie eine Möglichkeit, das zu verhindern? Sei es, dass das Bild dann über die Grenzen der Spalte hinaus dargestellt wird oder dass ich die Größe des Bildes auch "dynamisch" verändern könnte? (Allerdings ohne Script, nur html und css.)

Ein anderes Beispiel: Wenn ich einen "Container" anlege, also ein div mit z. B. einer Breite von 800px und in diesen lege ich nun drei oder auch mehr Spalten, die sich jeweils mit float:left umfließen - gibt es eine Möglichkeit dafür zu sorgen, dass diese Struktur keinesfalls aufgelöst wird, also eine Spalte auf keinen Fall mal irgendwie nach unten geschoben wird?

Vor allem: gibt es eine Regel, wie man margins und paddings, die in den divs gesetzt wurden, mitberechnen muss? Damit meine ich: wenn der Container 800px breit ist und ich die drei Spalten mit margin und padding auf 0 setze und dann in der Breite auf zwei Mal 200px und einmal 400px gibt es ja keine Probleme, sofern ich nicht zu große Sachen in die divs reinpacke. Aber mit so einer Einstellung würde ja nichts hübsch aussehen, sondern alles aneinander kleben. Also würde ich den Spalte vielleicht jeweils ein padding und margin geben. Und damit bekomme ich aber insbesondere im IE ganz schnell auch wieder Probleme.

Mir ist schon klar: eigentlich ist das ja Sinn der Sache, diese flexible Geschichte, aber es gibt doch jede Menge Designs, die drei- oder mehrspaltig aufgebaut sind und teilweise innerhalb dieser Spalten auch noch mal floats verwenden und bei denen sähe es doch auch pottenhässlich aus, wenn plötzlich eine Spalte nach unten rutschte.

Falls es informative Links dazu gibt, bin ich durchaus interessiert. Allerdings wären mir welche auf in Deutscher Sprache lieber - mein Englisch ist nicht gar so ausgeprägt...

Gruß,
Conny

[wahsaga]

hi,

Vor allem: gibt es eine Regel, wie man margins und paddings, die in den divs gesetzt wurden, mitberechnen muss?

Als erstes solltest du dich mit dem Box-Modell beschäftigen.

gruß,
wahsaga

[Conny]

Guguck,

Als erstes solltest du dich mit dem Box-Modell beschäftigen.

Jau, perfekt, genau so etwas habe ich gesucht.

Hast du noch so einen schönen Hinweis zum "Fixieren" von floatenden Elementen? :-)

Gruß,
Conny

[wahsaga]

hi,

Hast du noch so einen schönen Hinweis zum "Fixieren" von floatenden Elementen? :-)

Wenn du den Container, in dem sich die gefloateten Elemente befinden, breit genug machst, dann können sie schon mal nicht untereinander dargestellt werden, wenn die Breite des Anzeigebereiches zu schmal wird - allerdings gibt es dann Scrollbalken.

Und wenn die Breite von Elementen sich durch übergroße Inhalte nicht ändern soll, hilft overflow weiter. "Weiterhelfen" natürlich nur in so fern, dass überbreite Inhalte dann abgeschnitten werden - sieht auch nicht schön aus, bzw. macht den Inhalt ggf. sogar unzugänglich.

gruß,
wahsaga