Stefan E: Blockhöhe

Hallo zusammen
Ich möchte ein Design erstellen welches nicht mehr auf Tabellen basiert. Dabei stosse ich aber immer wieder auf Probleme wie das folgende.
Ich möchte einen linken und eine rechten Block nebeneinander haben welche immer beide gleich hoch sein sollen. Die höhe ist aber variabel und hängt vom Text in den Blöcken ab.

Ich habe nun folgenden Code
css:

  
#container {  
 width: 752px;  
 border: 1px solid #222222;  
}  
#main {  
 width: 550px;  
 float: left;  
 border: 1px dotted gray;  
}  
#right {  
 width: 200px;  
 float: right;  
 background-color: yellow;  
}  
#bottom {  
 clear: both;  
 background-color: red;  
 border-top: 1px solid black;  
}  

html:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
 <link rel="STYLESHEET" type="text/css" href="tmp.css">  
</head>  
<body style="margin:20px 0px 0px 20px;">  
 <div id="container">  
  <div id="main">  
   h<br>o<br>h<br>e<br>r <br><br>t<br>e<br>x<br>t  
  </div>  
  <div id="right">  
   rechts  
  </div>  
  <div id="bottom">  
   bottom  
  </div>  
 </div>  
</body>  
</html>  

Leider interpretiert der IE und der Firefox den Code unterschiedlich und beide nicht so wie ich es gerne hätte.
Das Ergebniss müsste eigentlich so aussehen wie auf dem Bild unten.

Was muss ich an meinem CSS ändern, dass beide Blöcke (main und right) jeweils die selbe höhe haben?

Vielen Dank für die Hilfe.

  1. Hi!

    Ich möchte ein Design erstellen welches nicht mehr auf Tabellen basiert. Dabei stosse ich aber immer wieder auf Probleme wie das folgende.

    Hallo Leidensgenosse ;-)

    Das Ergebniss müsste eigentlich so aussehen wie auf dem Bild unten.

    Wie kommst du darauf? Du gibst nirgendwo eine Höhe an.

    Was muss ich an meinem CSS ändern, dass beide Blöcke (main und right) jeweils die selbe höhe haben?

    So wie ich das sehe, soll das ja immer die komplette Höhe einnehmen. Dann verpass dem body einfach ein Hintergrundbild mit der entsprechenden Breite und lass es vertikal wiederholen. Praxisbeispiel: THW Iserlohn.

    Gruß aus Iserlohn

    Martin

    1. Hallo Leidensgenosse ;-)

      Schön zu hören.

      Das Ergebniss müsste eigentlich so aussehen wie auf dem Bild unten.

      Wie kommst du darauf? Du gibst nirgendwo eine Höhe an.

      Ich weiss das ich nirgends eine höhe angebe. Aber ich habe es mit verschiedensten Höhenkonstelationen ausprobiert und habe nichts gutes hingebracht, darum dachte ich mir, das ich die Höhe im veröffentlichten Code gleich weg lasse.

      So wie ich das sehe, soll das ja immer die komplette Höhe einnehmen. Dann verpass dem body einfach ein Hintergrundbild mit der entsprechenden Breite und lass es vertikal wiederholen. Praxisbeispiel: THW Iserlohn.

      Nein ich möchte nicht, das der Background über die ganze höhe ist, sondern nur so hoch wie der Content auch ist.

      1. Hi,

        Nein ich möchte nicht, das der Background über die ganze höhe ist, sondern nur so hoch wie der Content auch ist.

        Schon klar. Schau Dir mal das Beispiel http://de.selfhtml.org/css/layouts/anzeige/hintergrund.htm und die Erklärungen hierzu an.

        freundliche Grüße
        Ingo