[CSS] 2 Div-Boxen nebeneinander darstellen

[Benny-one]

Hi, ich möchte gerne 2 Divboxen nebeneinander darstellen. Jede Box soll 100px breit sein.

Variante 1 (IE kompatibel)

<div style="display:inline; border:1px solid #000; width:100px;">A</div> 
<div style="display:inline; border:1px solid #000; width:100px;">b</div>

Variante 2 (IE & FF kompatibel, jedoch nicht mein gewünschtes Ergebnis)

<div style="width:200px;">
	<div style="float:right; border:1px solid #000; width:100px;">b</div>
	<div style="border:1px solid #000; width:100px;">A</div>
</div>

Variante 3 (Variante 1 im FF, funktioniert nur leider nicht mehr im IE)

<div style="width:200px;">
	<div style="float:right; border:1px solid #000; width:100px;">b</div>
	<div style="float:left; border:1px solid #000; width:100px;">A</div>
</div>

Variante 4 (Workaround)

<div style="width:203px;">
	<div style="float:right; border:1px solid #000; width:100px;">b</div>
	<div style="border:1px solid #000; width:100px;">A</div> 
</div>

2. und 4. unterscheiden sich nur in der Breitenangabe (2.=200px, 4.=203px). Leider zeigen selbst bei Variante 4 beide ein nicht ganz gleiches Ergebnis an :-(

Könnte mir jemand mal so n Stichwort an Kopfschmeißen, wie ich das lösen könnte? Ich kann dann auch selber im SelfHTML nach suchen (doch bisher nicht fündig geworden)

[Kropff]

schau dir mal den thread an, vielleicht ist es das selbe problem, das ich auch hatte.

gruß
peter

[Wendel]

Moin Benny-one,

entweder findest Du Dich damit ab, dass die Lösung, die für beide Browser das gleiche Ergebnis liefert nicht unbedingt genau Deinen Vorstellungen entspricht. (gewisse CSS-features werden erfahrungsgemäß vom IE viel später implementiert als von FF)

Oder, (scheiß Lösung) Du checkst vorher den Browser ab und machst 2 CSS Dateien die Du je nach Browser einbindest.
If IE dann style/IE/layout.css, if FF dann style/ff/layout.css.

Kostet u.U. weniger Zeit als das Experimentieren, um dann nacher doch festzustellen, dass das eben anders interpretiert wird.

Gruß
Wendel

[Benny-one]

entweder findest Du Dich damit ab, dass die Lösung, die für beide Browser das gleiche Ergebnis liefert nicht unbedingt genau Deinen Vorstellungen entspricht.

ich werde mich sicher nicht damit abfinden...

gewisse CSS-features werden erfahrungsgemäß vom IE viel später implementiert als von FF

ich weiß war nicht wie es laut W3C vorgesehen ist, aber selbst wenn ich einem DIV ein display:inline gebe hat es gefälligst 100px breit zu sein -> und falls das laut W3C in Ordnung sei, dann hat die Macke der FF und nicht der IE.

Oder, (scheiß Lösung) Du checkst vorher den Browser ab und machst 2 CSS Dateien die Du je nach Browser einbindest.
If IE dann style/IE/layout.css, if FF dann style/ff/layout.css.

ne, will nur 1 CSS datei haben.

Werde die Lösung von Peter mal näher ansehen.

[wahsaga]

Original geschrieben von Benny-one
ich weiß war nicht wie es laut W3C vorgesehen ist, aber selbst wenn ich einem DIV ein display:inline gebe hat es gefälligst 100px breit zu sein

Nein, dann hat seine Breite gefälligst abhängig vom Inhalt zu sein.
http://www.w3.org/TR/CSS21/visudet.h...width-property:

'width'
Applies to: all elements but non-replaced inline elements, table rows, and row groups

-> und falls das laut W3C in Ordnung sei, dann hat die Macke der FF und nicht der IE.

FF gut, IE (und Benny-one) keine Ahnung :-)


Aber warum floatest du nicht einfach beide Divs nach links?

#a, #b { float:left; width:100px; border:1px solid #000; }

<div id="a">A</div>
<div id="b">B</div>

[Benny-one]

wahsaga du mein CSS Gott , das funktioniert ja wunderbar.

'width'
Applies to: all elements but non-replaced inline elements, table rows, and row groups

das wusste ich nicht (habe ich ja auch gesagt das ich es nicht weiß)

FF gut, IE (und Benny-one) keine Ahnung :-)

wie gemein