CSS -> float (HTML, CSS und Javascript)

[thread]2263[/thread]

CSS -> float

Gast Gast

2005-07-13 12:37

Ich hab die folgende CSS-Definition:

Code: (dl )

#left {
    width : 50%;
    float : left;
    background-color : #CCCCCC;
}

#right {
    width : 50%;
    float : right;
    background-color : #CCCCCC;
}

#main #content #NULL {
    clear : both;
}

Die folgendermaßen in HTML eingebunden wird:

Code: (dl )

<div id="left">
    Hallo
</div>

<div id="right">
    Hallo
</div>

<div id="NULL"></div>

Das soll zwei Blöcke erzeugen die nebeneinander liegen und mit beliebigem Inhalt gefüllt werden können. Funktioniert soweit auch wunderbar!

Sobald ich aber Border, Margin oder Padding Definitionen in einen der beiden Blöcke aufnehme, reagieren diese im Firefox unvorhersehbar, der eine Block verschwindet, der andere wird viel zu groß etc., im IEX ist alles wunderbar.

Kennt jemand das Problem?

Gruß

D.

GwenDragon

2005-07-13 13:37

User since
2005-01-17
14748 Artikel
Admin1

Es kommt auf den Doctype des HTML-Dokuments an wie die Browser interpretieren - Stichwort Quirksmodus.

http://de.selfhtml.org/css/formate/box_modell.htm zeigt, wie das Boxmodell aufgebaut ist. padding und margin addieren sich dazu. Damit werden die Boxen breiter wie 50%.\n\n

die Drachin Gwen

Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten

Taulmarill

2005-07-13 13:58

User since
2004-02-19
1750 Artikel
BenutzerIn

user image

wie man hier nachlesen kann, wird zumindest nach css 2.1 padding, border und margin auf die width angabe addiert.

$_=unpack"B*",~pack"H*",$_ and y&1|0& |#&&print"$_\n"for@.=qw BFA2F7C39139F45F78 0A28104594444504400 0A2F107D54447DE7800 0A2110453444450500 73CF1045138445F4800 0 F3EF2044E3D17DE 8A08A0451412411 F3CF207DF41C79E 820A20451412414 83E93C4513D17D2B

View all threads created 2005-07-13 12:37.