Bisher hatte ich eine Lösung, die ganz gut funktioniert hat, bei der sich aber die Breite auf die screenwidth bezog und per @media-Kondition leicht gesteuert werden konnte.
Besonders schön war, dass beide Spalten immer gleich lang waren, egal wie der Text sich darin verteilt hat! Sogar bei Bedarf konnte ich eine vertikale Trennlinie zwischen die Spalten ziehen, die natürlich bei einspaltiger Darstellung verschwand.
Leider gibt es auch die Notwendigkeit, nicht nur den main-content in manchen Webseiten darzustellen, sondern auch eine Seitenspalte. Die Breite der Seitenspalte würde aber fälschlich bei einer @media-Kondition mit einbezogen. Das führt dann zu viel zu schmalen Spalten im main-content, wenn die Seitenspalte angezeigt wird.
Hier ein Ausschnitt aus dem CSS, das mittels @media gut funktioniert hat und sogar für einen automatisch eingefügten Abstand zwischen den Spalten gesorgt hatte:
.column-cl {
float: left;
width: 100%;
box-sizing: border-box;
}
@media screen and (min-width: 800px) {
.right-cl {
padding-right: 1em;
/* border-right: 1px solid #fbb;
bei Bedarf Trennlinie zwischen den Spalten */
}
.left-cl {
padding-left: 1em;
}
}
/* Clear floats after the columns */
.row-cl:after {
content: "";
display: table;
clear: both;
}
/* Oberhalb von 800px soll zweispaltig dargestellt werden */
@media screen and (min-width: 800px) {
.column-cl {
width: 50%;
}
}
Im HTML sieht dann die Anwendung so aus:
<h3 class="head-bg">Erster Untertitel</h3>
<div class="row-cl">
<div class="column-cl right-cl">
<p>Text in der linken Spalte</p>
</div>
<div class="column-cl left-cl">
<p>Text in der rechten Spalte</p>
</div>
</div>
Alles anzeigen
Um die viel zu kleinen Spalten zu vermeiden, darf sich die Kondition nicht mehr mittels @media screenwidth auf die darstellbare Breite insgesamt beziehen, sondern muss sich auf die Breite des div containers ".row-cl" beziehen.
Erst wenn "row-cl" breiter als 480px ist, soll zweispaltig dargestellt werden.
Frage: Wie kann ich mittels min-width oder max-width Definitionen oder mit anderen CSS-Möglichkeiten mein Ziel erreichen?