Dirk: Zwei mal float: left, nur eines aufheben

Beitrag lesen

Hallo Miteinander,

ich beiße mir schon seit Stunden die Zähne aus an diesem Problem. Habe dieses HTML (verkürzt) und will die Box "unten" unter "img" und "rechts", aber noch neben "menue". Nur wie stelle ich das an? So wie im Beispiel überlappt er mit "img". Wenn ich ein clear:left einbaue setzt er die Box auch unter "menue". Wäre dankbar für jeden Tipp.

Dirk

<html>  
<head>  
<title>CSS-Test</title>  
<style type="text/css">  
<!--
  
#menue{  
border: 1px solid red;  
float: left;  
height: 300px;  
width: 150px;  
}  
#main{  
border: 1px solid green;  
margin-left: 175px;  
}  
.img{  
border: 1px solid blue;  
float: left;  
height: 100px;  
width: 100px;  
}  
.rechts{  
border: 1px dashed purple;  
margin-left: 110px;  
}  
.unten{  
border: 1px dashed black;  
}
-->  
</style>  
</head>  
  
<body>  
<div id="menue">Menue</div>  
<div id="main">  
<div class="img">Bild<br />Bild<br />Bild</div>  
<div class="rechts">Text rechts<br />neben dem Bild</div>  
<div class="unten">Text unter dem Bild</div>  
</div>  
</body>  
</html>