Boxen, wie Tabellen

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?

3 Gedanken zu „Boxen, wie Tabellen“

  1. 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.

  2. 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?

  3. 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…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.