Problem mit float:left und Zentrieren

[Stefan]

Hallo zusammen!

Ich habe zwei DIVs, ein Inneres und ein Äußeres. Im inneren DIV möchte ich ein float:left (wg. bestimmten Inhalten), im Äußeren hätte ich gerne das Innere zentriert.
In etwas so:
<div style="margin:0px auto">
   <div style="float:left">
      ... ganz viel Content!
   </div>
<div>

Das äußere wird nicht zentriert. Gibt es dafür einen Trick?
Noch etwas: ich kann nur für das Äußere DIV eine feste Größe angeben...

Viele Grüße,
Stefan

[ChrisB]

Hi,

<div style="margin:0px auto">
   <div style="float:left">
      ... ganz viel Content!
   </div>
<div>

Das äußere wird nicht zentriert.

Doch. Der seitlich verbleibende Rand ist in zwei exakt gleich grosse Bereiche aufgeteilt worden; der eine davon befindet sich links, der andere rechts vom Element.
(Dass du sie nicht bemerkst, kann nur daran liegen, dass sie die Breite 0 haben.)

MfG ChrisB

[Stefan]

Doch. Der seitlich verbleibende Rand ist in zwei exakt gleich grosse Bereiche aufgeteilt worden; der eine davon befindet sich links, der andere rechts vom Element.
(Dass du sie nicht bemerkst, kann nur daran liegen, dass sie die Breite 0

Hm, irgendwie nicht. Im Inneren ist ein Bild, das klebt trotzdem auf der linken Seite.

[ChrisB]

Hi,

Doch. Der seitlich verbleibende Rand ist in zwei exakt gleich grosse Bereiche aufgeteilt worden; der eine davon befindet sich links, der andere rechts vom Element.
(Dass du sie nicht bemerkst, kann nur daran liegen, dass sie die Breite 0

Hm, irgendwie nicht. Im Inneren ist ein Bild, das klebt trotzdem auf der linken Seite.

Natuerlich, du hast es ja nach links gefloatet.

Dein Container-Element ist "zentriert" - da es die volle Breite einnimmt, sieht man davon natuerlich eher wenig.
Und das Bild darin wird links ausgerichtet, wie es deine float-Angabe erfordert.

MfG ChrisB

[Stefan]

Hallo,
erstmal vielen Dank für Eure Hilfe!

Dein Container-Element ist "zentriert" - da es die volle Breite einnimmt, sieht man davon natürlich eher wenig.
Und das Bild darin wird links ausgerichtet, wie es deine float-Angabe

Soweit leuchtet mir das ein... und trotzdem habe ich genau das Problem, dass ich keine feste Größe für das innere DIV angeben kann.
Ich habe noch ein bißchen weitergearbeitet und die Struktur sieht nun so aus:

<div style="margin: 0px auto">
  <div style="float:left; padding:4px; border: 1px solid black;">
     <img src="..." />
  </div>
</div>

Ich versehe also ein Bild mit einem Rahmen, das float:left dient dazu, einen Schatten zu erzeugen. (Vielleicht kennt Ihr ja die bekannte Drop-Shadow Lösung: http://www.alistapart.com/articles/cssdropshadows)

Nun versteht Ihr mein Dilemma vielleicht: ich kann keine feste Breite für das innere DIV angeben...

Gruß
Stefan

[ChrisB]

Hi,

Ich versehe also ein Bild mit einem Rahmen, das float:left dient dazu, einen Schatten zu erzeugen. (Vielleicht kennt Ihr ja die bekannte Drop-Shadow Lösung: http://www.alistapart.com/articles/cssdropshadows)

Nein, das floaten erzeugt keinen Schatten.
Es dient, wie auf der Seite beschrieben, lediglich dazu, den block-Container so breit zu machen, wie das Bild, ohne eine Breite angeben zu muessen.

Nun versteht Ihr mein Dilemma vielleicht: ich kann keine feste Breite für das innere DIV angeben...

Na dann realisiere den Schatten doch anders ...
Was denn, wenn du z.B. ein inline-Element um das Bild legst?

MfG ChrisB

[Stefan]

Hi,

Na dann realisiere den Schatten doch anders ...
Was denn, wenn du z.B. ein inline-Element um das Bild legst?

Hm. Ich habe bisher noch keine andere gute browserübergreifende Variante gefunden. Es gibt noch ein paar JavaScripts, aber, naja....

[ChrisB]

Hi,

Na dann realisiere den Schatten doch anders ...
Was denn, wenn du z.B. ein inline-Element um das Bild legst?

Hm. Ich habe bisher noch keine andere gute browserübergreifende Variante gefunden.

Ich sehe nicht, was daran so kompliziert sein soll.

MfG ChrisB

[Stefan]

Ich sehe nicht, was daran so kompliziert sein soll.

Mein Ehrgeiz war einfach geweckt. :-)

Ich halte nun das Bild in einem PHP-Objekt vor und gebe dann dem DIV eine feste Weite.
Vielen Dank für die Hilfe!

[ChrisB]

Hi,

Ich halte nun das Bild in einem PHP-Objekt vor und gebe dann dem DIV eine feste Weite.

Ich sehe immer noch nicht, warum das noetig sein sollte.

Welche Probleme bekommst du denn, wenn du stattdessen einfach ein inline-Element um das Bild legst, und das Bild dann (ungefloatet) einfach per relativer Positionierung verschiebst?

MfG ChrisB

[molily]

Im inneren DIV möchte ich ein float:left (wg. bestimmten Inhalten), im Äußeren hätte ich gerne das Innere zentriert.

Was denn nun?
Das innere soll im äußeren zentriert sein (das beißt sich aber mit float:left), oder das äußere soll in dessen Elternelement zentriert sein?

<div style="margin:0px auto">
   <div style="float:left">
      ... ganz viel Content!
   </div>
<div>

Wenn du einem Element keine Breite gibst, nimmt es üblicherweise die volle Breite ein.
Wenn du ein Element mit voller Breite zentrierst, ist von Zentrierung nichts zu sehen.

Ein Element, das nur eine floatende Box als Inhalt hat, hat im Übrigen eine Höhe von 0, sofern es keinen »Block Formatting Context« bildet. Das kannst du z.B. mit overflow:hidden (und im Internet Explorer 6 mit dem IE-spezifischen zoom:1) erreichen.

Mathias