Ein Evergreen….
2 oder 3 Spalten nebeneinander. Diese haben nicht gleich viel Inhalt – sind also verschieden lang. Sieht gar nicht schön aus.
Dem kann aber Abhilfe geschaffen werden. Hier das Resultat.
1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text
2 Blublubla
3 ein wenig Text 3 ein wenig Text 3 ein wenig Text 3 ein wenig Text 3 ein wenig Text 3 ein wenig Text 3 ein wenig Text 3 ein wenig Text
HTML:
<div class="page-container">
<div class="box">1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text 1 viel Text</div>
<div class="box">2 Blublubla</div>
<div class="box">3 ein wenig Text 3 ein wenig Text 3 ein wenig Text 3 ein wenig Text 3 ein wenig Text 3 ein wenig Text 3 ein wenig Text 3 ein wenig Text</div> </div>
<div class="clearfix"></div>
CSS:
.page-container {
display: table;
border-spacing: 12px; }
.box {
display: table-cell;
float: none; /*left;*/
width: 33.333%;
padding: 12px;
background: #eee; }
Nicht behandelt habe ich in diesem Beitrag die Tatsache, dass es natürlich nett wäre, wenn die linke Spalte ganz nach links aussen günge und die 3. Spalte ganz nach rechts.
Kommt irgend wann mal noch….