steohan: CSS-Layout und Float für Bilder

Beitrag lesen

SELF-Forum

CSS-Layout und Float für Bilder

steohan
– Informationen zu den Bewertungsregeln

Hallo,
folgendes, ich habe ein 3-spaltiges CSS-Layout mit float gemacht, innerhalb der 2. und 3. Spalte befinden sich Einträge mit Texten zu denen u.U. auch ein Bild gehört, das wiederum float links oder rechts hat.

Funktioniert soweit auch alles einwandfrei, außer wenn der Text kürzer als das Bild ist => das Bild ragt über den Hintergrund hinaus.
Das ist auch noch klar, hängt ja am float.

ABER wenn ich jetzt noch ein Element mit clear:both; darunter setze, geht das Div nicht nur bis zum ende des Bildes sondern bis zum Ende der Navigation herunter! Da danach aber ein weiterer Eintrag folgen soll ist das äußerst unpraktisch!

Hier mal als vereinfachtes Beispiel, wo man es gut sieht:

  
<html>  
<head>  
<style>  
[code lang=css]  
#links{  
  float:left;  
  height:100px;  
  width:50px;  
  background-color:#f00;  
}  
#mitte{  
  background-color:#0f0;  
  padding-left:50px;  
  width:200px;  
}  
#Bild{  
  width:50px;  
  height:50px;  
  background-color:#77f;  
  float:right;  
}

</style>
</head>
<body>

<div id="links">
navi
</div>

<div id="Mitte">
  <div id="Bild">Bild</div>
  <p>Das ist ein kurzer Absatz</p>
  <div style="clear:both;"></div>
</div>

</body>
</html>
[/code]

Irgendwelche Lösungsvorschläge?

Das einzige was mir einfällt ist, dass man eben doch ein Tabellen-Layout verwenden muss!

Beitrag melden
–
Informationen zu den Bewertungsregeln