nicht angemeldet
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>
Marc