css div Border nicht angezeigt

[Meila]

Hallo!

ich versuche mich gerade daran, div - Elemente zu verschachteln.
Jetzt habe ich 4 div s definiert. Zunächst möchte ich die einfach ausgeben lassen, habe also etwas Text rein geschrieben und dann noch eine Border rum gemacht. Ich verstehe jetzt nur nicht, warum das äussere div nicht dafür sorgt, dass die anderen drei div s mit einer Border umrandet werden, sonder nur ca 1cm hoch oben rumhängt.
Kann mir das bitte jemand erklären?
Klar könnte ich jetzt einfach Tabellen nehmen, aber die waren ja gerade nicht im ursprünglichen css vorgesehen und ich würde es eben gerne auch verstehen.
Ich habe jetzt mal den "code" angehängt, sodass ihr besser wisst was ich meine, liess sich dadurch also nicht vermeiden, dass die Frage so lang wurde.

DANKE

CSS-Ausschnitt:
#drei_spalten{
 margin:30px;
 padding:10px;
 background-color:green;
 border:1px solid yellow;
 }
  #drei_spalten #erste_spalte{
 float:left;
 border:1px solid brown;
 width:22%;
 }
  #drei_spalten #zweite_spalte{
 float:left;
 border:1px solid orange;
 margin:10px;

width:50%;
 }
  #drei_spalten #dritte_spalte{
 float:right;
 border:1px solid cyan;
 width:22%;
 }

HTML-Ausschnitt:
<div id="drei_spalten">
   <div id="erste_spalte">
      erste Spalte <p>many daten</p>
         <h2>und noch mehr daten</h2>
         <p>many data</p>  <p>many daten</p>
         <h2>und noch mehr daten</h2>  <p>data</p>
         <h2>und noch mehr daten</h2>  <p>data</p>
   </div>
   <div id="zweite_spalte">
      zweite Spalte
   </div>
   <div id="dritte_spalte">
      dritte spalte<br>
      mehr
   </div>
  </div>

[Cheatah]

Hi,

Ich verstehe jetzt nur nicht, warum das äussere div nicht dafür sorgt, dass die anderen drei div s mit einer Border umrandet werden, sonder nur ca 1cm hoch oben rumhängt.
Kann mir das bitte jemand erklären?

exakt so ist Floating gedacht. Oberhalb von http://www.w3.org/TR/CSS21/visuren.html#propdef-float sind einige Grafiken, die das anschaulich illustrieren.

Klar könnte ich jetzt einfach Tabellen nehmen, aber die waren ja gerade nicht im ursprünglichen css vorgesehen

Aber hallo sind sie das[1]. Du könntest die inneren <div>-Elemente mit display:table-cell versehen und das äußere mit display:table. Oder aber Du recherchierst das *sehr* oft angesprochene Thema, welchen Zusammenhang es zwischen der float- und der overflow-Eigenschaft sowie height:auto gibt.

Cheatah

[Cheatah]

Argl,

Fußnote vergessen:

Aber hallo sind sie das[1].

[1] Es sei denn, Du meinst CSS/1.0.

Cheatah

[Marc]

Hallo Meila,

CSS-Ausschnitt:
#drei_spalten{

Vielleicht suchst du auch nur nach einer Möglichkeit, ein dreispaltiges Layout zu realisieren? wenn Du möchtest, dass alle drei Spalten immer gleich hoch scheinen, hilft Dir vielleicht dieses Layout weiter?

Viele Grüße,
Marc.