Problem: Zwei Boxen nebeneinander mit gleicher Höhe. Die Höhe wird von der Box bestimmt, die den meisten Inhalt hat.
Mögliche Lösung:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.wrap {
width: 300px;
padding: 0;
margin: 0;
border: 1px solid red;
background-image: url(pixel.gif);
background-position: center top;
background-repeat: repeat-y;
margin-top: 10px; /* nur für die Kosmetik */
}
.links {
float: left;
width: 130px !important;
padding: 10px;
margin: 0;
width /**/: 149px; /* IE Hack :-( */
}
.rechts {
float: left;
width: 130px !important;
padding: 10px;
margin: 0;
width /**/: 149px; /* und noch einmal */
}
br.clear {
clear: both;
height: 0;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="links">
Schnick
</div>
<div class="rechts">
Schnack<br>Schnack
</div>
<br class="clear">
</div>
<div class="wrap">
<div class="links">
Schnick<br>Schnack<br>Schnuck
</div>
<div class="rechts">
Schnick
</div>
<br class="clear">
</div>
<div class="wrap">
<div class="links">
Schnick
</div>
<div class="rechts">
Schnack<br>Schnack<br>Schnuck
</div>
<br class="clear">
</div>
</body>
</html>
Und so sieht das dann aus: /wp/2spalten.html
Folgeprobleme: 3-spaltigkeit? Abstand zwischen den Boxen? Morgen vieleicht :-)
(Funktioniert im IE ab 5.01, Opera und Gecko)
Kommentare?
Wenn ich das beim kurzen Begutachten vorm Bettchengehen richtig beobachtet habe, verwende ich nahezu dieselbe Art, nur das ‚clear‘ mache ich mit einem html-seitigen
.
Geht mit beliebig vielen Spalten, jede weitere bekommt auch ein float:left; – ist nur immer etwas Pixel-Summiererei, wenn man den ‚wrapper‘ außenrum fest dimensioniert.
Hmmm. Weitere Spalten… Da hast du aber ein Problem mit den vertikalen Trennlienien. Oder du musst halt sehr genau arbeiten :-)
Gibt es einen Grund für das HTML-seitige clear?
Die Trennnlinien erzeuge ich im umgebenden ‚wrapper‘ per geeigneter Hintergrundgrafik (Streifen repeat-y).
Das HTML-seitige ‚clear‘ kenne ich von einer Vorlage, nach der ich meine Variante gebastelt habe, und von früheren HTML-Geschichten. Ist mir so im Kopf geblieben, aber konsequenter wäre eigentlich die Stylesheet-Lösung…