3 divs mit float und alles mittig

[dacrow]

hey leute!
hab ein problem bei der ausrichtung von divs. dabei möchte ich, dass drei divs nebeneinander platziert werden, wenn genug platz ist. wenn der anzeigebereich zu klein ist, dann soll gefloatet werden, so dass zunächst nur noch zwei nebeneinander passen und im schlimmsten fall alle drei übereinander stehen.
das ganze soll dann jedoch mittig in einem umgebenden div ausgerichtet sein:

________________________________
|    _____    _____    _____   |
|   |    |   |    |   |    |   |
|   |    |   |    |   |    |   |
|   |____|   |____|   |____|   |
|______________________________|

bisher hab ich folgenden code:

...

<div style="margin: 0 auto;" >  
 <div style="float: left; margin: 0 10px; width: 220px;" >  
  <div style="margin-top: 20px;">  
   <img src="p.jpg" width="200" height="200" />  
  </div>  
  <div style="margin-top: 20px;" >  
   <img src="p.jpg" width="200" height="200" />  
  </div>  
 </div>  
 <div style="float: left; margin: 20px 20px; width: 220px;">  
   TEXTEXTEXT  
 </div>  
 <div style="float: left; margin: 0 10px; width: 220px;">  
  <div style="margin-top: 20px;">  
   <img src="p.jpg" width="200" height="200" />  
  </div>  
  <div style="margin-top: 20px;">  
   <img src="bilder/p.jpg" width="200" height="200" />  
  </div>  
 </div>		  
 <div style="clear: left"></div>  
</div>

...

problem ist: das äußerste div hat immer die volle breite des monitors und wird deshalb nicht mittig angezeigt. wenn ich eine width: 720px; vergebe, dann geht es. aber: wenn der anzeigenbereich zu klein wird, dann floaten die inneren elemente nicht mehr...

ich möchte also, dass die inneren divs floaten und dabei mittig angezeigt werden.. gibts dafür eine lösung?

thx

[apsel]

Om nah hoo pez nyeetz, dacrow!

ohne deinen Code gelesen zu haben: Schau mal hier: http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout
Matthias

[Længlich]

Mauya!

________________________________
|    _____    _____    _____   |
|   |    |   |    |   |    |   |
|   |    |   |    |   |    |   |
|   |____|   |____|   |____|   |
|______________________________|

ich möchte also, dass die inneren divs floaten und dabei mittig angezeigt werden.. gibts dafür eine lösung?

Float und mittig ist ein Widerspruch - nebeneinander und mittig aber zum Glück nicht. Du kannst den inneren Elementen display:inline-block geben und sie dann einfach per text-align:center im äußeren Element zentrieren. (IE 6 und 7 brauchen noch display:inline für die inneren.)

Wenn sie alle auch noch gleich hoch sein sollen, ist display:table-cell interessant. (IE 6 und 7 brauchen dann eine expression.)

Viele Grüße vom Længlich

[dacrow]

danke ihr zwei für eure hilfe!!
meine lösung sieht nun so aus:

<div style="margin: 0 auto; text-align: center;" >  
 <div style="display: inline-block; max-width: 700px;" >  
  <div style="display: inline-block; display:inline;">  
   <img src="p1.jpg" width="200" height="200" alt="" />  
  </div>  
  <span style="display: inline-block; width: 200px; height: 200px; vertical-align: top;">  
    TEXTEXTEXTEXT  
  </span>  
  <div style="display: inline-block; display:inline;">  
   <img src="p2.jpg" width="200" height="200" alt=""/>  
  </div>  
  <div style="display: inline-block; display:inline;">  
   <img src="p3.jpg" width="200" height="200" alt="" />  
  </div>  
  <span style="display: inline-block; width: 200px; height: 200px; vertical-align: top;"></span>  
  <div style="display: inline-block; display:inline;">  
   <img src="p4.jpg" width="200" height="200" alt="" />  
  </div>  
 </div>	  
</div>

funktioniert unter allen modernen browsern genau so, wie ich es mir gewünscht habe, beim IE6 und IE7 zumindest zufrieden stellen.

manchmal wünsch ich mir 1999 und tabellenlayouts wieder herbei ;)

[apsel]

Om nah hoo pez nyeetz, dacrow!

und wenn du jetzt noch die CSS-Angaben in ein eigenes Stylesheet schreibst, sieht dein Markup auch noch schön aufgeräumt aus.

Auch dafür gibt es http://de.selfhtml.org/css/formate/einbinden.htm@title=Artikel bei Selfhtml.

Matthias