Stefan E: Blockhöhe

Beitrag lesen

SELF-Forum

Blockhöhe

Stefan E
– Informationen zu den Bewertungsregeln

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.

Beitrag melden
–
Informationen zu den Bewertungsregeln