Div-Anordnung

[zettelbox]

Hallo zusammen,

ich möchte etwas eigentlich sehr simples erstellen: Innerhalb eines größeren Div-Blocks sollen drei "Spalten" durch untergeordnete weitere Divs entstehen. Im Prinzip also eine einfache Tabelle innerhalb eines Divs mit drei Spalten, nur eben per CSS.

Das habe ich folgendermaßen realisiert:

  
<div class="margin: 1px solid black;">  
  <div style="float: left; width: 25%; text-align: center;">  
    <p>linke Spalte.</p>  
  </div>  
  <div style="float: right; width: 25%;">  
    <p>rechte Spalte.</p>  
  </div>  
  <div style="height: 100%;">  
    <p>Und die Mitte.</p>  
  </div>  
</div>  

Und das funktioniert auch wunderbar - zumindest auf den ersten Blick. Jedoch vergößert sich das äußere Div nicht. Wenn ich also nun einen längeren Text in die rechte Spalte einfüge, passt sich der Rahmen des äußeren Divs nicht entsprechend an. Selbes Problem beispielsweise beim Einfügen eines Bilds.

Wo ist mein Denkfehler? Wieso passt sich der Div-Block nicht an den Inhalt an, wird also länger?

Danke für Eure Hilfe.

[zettelbox]

Und direkt nochmal ich,

<div class="margin: 1px solid black;">

  
Hier soll anstelle von "margin" natürlich "border" stehen, ist mir jetzt beim Vereinfachen fürs Forum passiert.  
  
Gruß,  
zettelbox.

[zettelbox]

Hallo...

»» ~~~css

»» <div class="margin: 1px solid black;">
»»

>   
> Hier soll anstelle von "margin" natürlich "border" stehen, ist mir jetzt beim Vereinfachen fürs Forum passiert.  
>   
  
Haben wir nicht alle mal ein totales Blackout? Das "class" ist natürlich auch hochgradiger Blödsinn, natürlich ist "style" gemeint.  
  
Entschuldigt bitte diesen vermeidbaren Monolog. Nun sollte die Fragestellung passen.  
  
Danke im Voraus!

[Reynhard B.]

Hallo

<div style="float: left; width: 25%; text-align: center;">
    <p>linke Spalte.</p>
  </div>

Durch das float nimmst Du das Div soz. aus dem Fluß der Elemente raus, das umgebende Div weiß also nichts mehr von der Höhe. Nach dem floats ein Clear rein und dann passts wieder ;-)

Reynhard B.

[zettelbox]

Nabend!

»»   <div style="float: left; width: 25%; text-align: center;">
»»     <p>linke Spalte.</p>
»»   </div>

Durch das float nimmst Du das Div soz. aus dem Fluß der Elemente raus, das umgebende Div weiß also nichts mehr von der Höhe. Nach dem floats ein Clear rein und dann passts wieder ;-)

Dankeschön. Nur: Wo genau gehört das clear denn hin?

Gruß,
zettelbox

[Reynhard B.]

Hallo

Dankeschön. Nur: Wo genau gehört das clear denn hin?

Das umgebende Div läßt sich schön so clearen: http://www.jassesnee.de/easyclear/

Reynhard B.

[zettelbox]

Hallo Reynhard,

Das umgebende Div läßt sich schön so clearen: http://www.jassesnee.de/easyclear/

ein wunderbar hilfreicher Link. Vielen Dank, konnte das Problem so lösen.

Ein schönes Wochenende,
zettelbox