Hallo alle zusammen,
ich bin auf der Suche nach der Lösung zu folgendem Problem:
Ich habe folgendes HTML
<div id="rahmen">
<div id="spaltea">Das ist Inhalt 1</div>
<div id="spalteb">Das ist Inhalt 2 mit mehr Text, weshalb der DIV-Container größer wird</div>
</div>
und die dazugehöirge CSS
#rahmen{max-width:1000px; float:left;}
#spaltea{float:left; width:50%; background-color:#cccccc; padding:5px;}
#spalteb{float:left; width:50%; background-color:#888888; padding:5px;}
Befindet sich in der rechten Box (spalteb) nun sehr viel mehr Text, als in der linken, dann wird diese Box nach unten hin länger als die linke. Ich hätte sehr gerne eine Methode, dass die boxen in der Höhe aber immer gleich abschließen, egal ob in einer Box mehr oder weniger Text ist als in der anderen.
Gibt es eine Möglichkeit das umzusetzen, ohne Tabellen zu verwenden?
Vielen Dank
Saludos
Sunny
Beispielsweise so:
<div class="grid">
<div class="col col1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="col col2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
</div>
</div>
* { box-sizing: border-box; }
body{
font-family:sans-serif;
}
.grid{
display: table;
width: 100%;
border-spacing:0;
}
.col{
padding:1em;
width:25%;
display:table-cell;
border:none;
}
.col1 {
background-color: pink;
}
.col2 {
background-color: lime;
}
Hi Jenses,
genial. Sehr geil. Vielen Dank
LG
Sunny
Hi,
jetzt habe ich doch noch eine kurze Frage.
Bei einer einfachen Tabellenstruktur via CSS ... ist es möglich einen Umbruch innerhalb einer Tabelle hervorzurufen?
<div class="grid">
<div class="eventspalte spalte1">###T4###</div>
<div class="eventspalte spalte2">###T3###</div>
<div class="eventspalte spalte3">###T2###</div>
<div class="eventspalte spalte4">###T1###</div>
</div>
.grid{
display: table;
padding-left:25px;
padding-right:25px;
padding-bottom:25px;
max-width: 1300px;
margin:0 auto;
}
.eventspalte{
width:25%;
display:table-cell;
border:none;
}
.spalte1{background-color: #000000;}
.spalte2{background-color: #555555;}
.spalte3{background-color: #999999;}
.spalte4{background-color: #cccccc;}
Nun habe ich 4 Infokästen nebeneinander, die immer die gleiche Höhe haben.
1 2 3 4
Jetzt will ich es allerdings respsonsiv haben mittels Media-Query.
@media only screen and (max-width : 900px) {}
Also bei einer Breite von 900px soll die erste und zweite Spalte je 50% erreichen und oben stehen, und die dritte und vierte Spalte mit je 50% darunter. Also:
1 2
3 4
Mit einem clear:both; komme ich da leider nicht weiter. Hat jemand eine Idee, wie ich diese Tabelle nach der zweiten Tabellenzelle umbrechen kann?
Vielen Dank
Saludos