2 kleine boxen neben einer großen box

[dartox]

Hallo Leute,
ich verzweifel hier echt langsam.

Mir gelingt es einfach nicht 2 kleine Boxen neben einer großen Box darzustellen. Wenn ich mit float und div herumspiele, landen die boxen entweder immer nebeneinander (also alle 3 nebeneinander) oder untereinander.

Ich hab mal ne kleine Skizze angefertigt.

Wie zum Teufel bekomm' ich das hin?

http://img232.imageshack.us/img232/101/boxena.jpg

 

[prm]

Entweder so

<div style=" float: left; width: 400px; height: 400px;  border: 2px solid red;">
große Box
</div>

<div style="margin-left: 410px;width: 200px; height: 190px; border: 2px solid green;">
kleine Box 1
</div>

<div style="margin-left: 410px; margin-top: 16px; width: 200px; height: 190px; border: 2px solid green;">
kleine Box 2
</div>

oder die kleinen in einen umhüllenden div packen:

<div style=" float: left; width: 400px; height: 400px;  border: 2px solid red;">
große Box
</div>

<div style="margin-left: 410px;">

<div style="width: 200px; height: 190px; border: 2px solid green;">
kleine Box 1
</div>
<div style=" margin-top: 16px; width: 200px; height: 190px; border: 2px solid green;">
kleine Box 2
</div>

</div>

 

[dartox]

danke sehr!
ich hab es in der zwischenzeit anders gelöst, und zwar mit grids, bzw. hab ich jeder box nen absoluten wert zugewiesen.

jetzt hab ich die frage was nun besser sei? mein (evt.) umständlich lösung mit den absoluten positionen oder deine lösung?

 

[prm]

Es führen immer viele Wege nach Rom.
Auf absolute Positionierung würde ich aber generell verzichten, wenn es nicht zwingend notwendig ist.
Hierdurch können bei zu kleinem Viewport Inhalte verschwinden.

 

[SpiceLab]

Solange die drei Boxen ihre festgelegte Breite und Höhe beibehalten, spricht hier nichts gegen absolute Positionsangaben.

 

[dartox]

danke. das problem ist halt das es nicht nur 3 boxen sind, sondern so um die 30, und das ein ganz schöner aufwand ist mit absoluten positionen. mir gehts auch eigentlich darum dass ich die "schnellste" methode wählen will, also die die vom browser am schnellsten umgesetzt werden kann (möcht meine seite so klein wie möglich halten, vom speicherplatz her).

noch eine frage. ist es mit css möglich text in einer div-box ab einer gewissen stelle mit "..." zu ersetzen (wenn der text zu lang wird, möchte ja haben das die boxen die höhe und breite beibehalten)? eher nicht, is wohl eher php-angelegenheit?!

 

[SpiceLab]

Und wie stellt sich das mit den 30 Boxen in der Seite konkret dar?

Zeilen- und/oder spaltenweise Wiederholung?

Zur zweiten Frage: Ist durchaus mit CSS möglich, aber nicht in jedem Browser, wenn's um die Maustastenreaktion geht

• http://www.cssplay.co.uk/menu/more.html
• http://www.cssplay.co.uk/menu/more_than.html

... deshalb Stus Weiterentwicklung unter Zuhilfenahme von JS:

• http://www.stunicholls.com/various/more.html

 

[dartox]

zeilenweise wiederholung. also sagen wir links is die große box, dann folgen 2 kleinere boxen (spaltenweise), dann folgen 4 kleinere boxen (auch spaltenweise), und dann 8 (hier auch spaltenweise).

die erste box (die große) gibt also quasi die höhe an, alle anderen müssen sich daran halten.

 

[SpiceLab]

Und die Höhe der linken großen Box ist bekannt? Soll auf die beiden kleinen Boxen verteilt werden?

 

[dartox]

genau. die breite und höhe der linken box ist bekannt, alle anderen boxen müssen also immer halb so groß sein (die erste box ist sagen wir mal 55px hoch, dann sollen die 2 rechts jeweils nur 25px hoch sein mit 5 px abstand, usw.)

ps: danke schonmal für stus weiterentwicklung!