✔ Float-Element ragt über Text hinaus

Status
Nicht offen für weitere Antworten.
O

obaran

Erfahrenes Mitglied
Hallo,

ich möchte ein Element links neben einem Text platzieren, der Text soll um das Element herumfließen, wenn dieser länger ist als das Element. Ansonsten soll der Text-Kasten
soweit "aufgezogen" werden das die Hintergrundfarbe von dem Text auch bis zu dem
Ende des anderen Elementes geht.

Hier mein HTML-Code:
HTML: 
<div style="float:left; width:40%;"><p>Floatender Text</p></div>
<p style="background:#00F">Absatz ausserhalb des Floats.</p>

Ich hab mal eben ein Beispielbildchen gemacht, was das ganze ein wenig verdeutlicht.
#1 Funktioniert wunderbar mit dem oben genannten HTML-Code
#2 Passiert wenn der Text zu kurz ist
#3 So möchte ich es gerne haben ;)

Ich hoffe es kann mir da einer weiterhelfen.

Danke und Gruß
Oliver
 

Anhänge

  • flaot.gif
    flaot.gif
    13,3 KB · Aufrufe: 53
Vielleicht entspricht dieses CSS-Modell deinen Vorstellungen:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
div.wrapper {
background: #ffff00;
}

div.leftCol {
float: left;
width: 40%;
background: #0000FF;
}

div.clear {
clear: left;
}
-->
</style>

</head>
<body>

<div class="wrapper">
     <div class="leftCol">
          <p>Floatender Text</p>
          <p>Floatender Text</p>
          <p>Floatender Text</p>
          <p>Floatender Text</p>
     </div>
     <p>Absatz ausserhalb des Floats.</p>

     <div class="clear"></div>
</div>

</body>
</html>
 
Hallo michaelsinterface,

danke für deine Antwort.

Da hast du recht, ein weiteres div Element herum zu bauen würde helfen.
Nur möchte ich das nicht so gerne. Ich habe schon so viele divs und classen für diesesen
Breich verwendet.
HTML: 
      <div class="schatten">
      	<div class="bg">
	        <span class="linkeobereecke"></span>
	        <span class="rechteobereecke"></span>
	        <h2>Flie&szlig;text mit Bild</h2>
	        <div class="textbild">
        		<img src="/media/img/217_152.gif" width="217" height="152" alt="217_152" /><em>1 Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen</em>
        		<img src="/media/img/217_152.gif" width="217" height="152" alt="217_152" /><em>1 Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen</em>
        		<img src="/media/img/217_152.gif" width="217" height="152" alt="217_152" /><em>1 Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen</em>
        	</div>
	        <p>
	        	Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein:<br />
	        	<a href="index.html">mehr</a>
	        </p>
	         <ul>
	            <li>
	              <a href="audio.html" class="audio">Audio-Datei</a>
	            </li>
	            <li>
	              <a href="image.html" class="image">Bildergalerie</a>
	            </li>
	            <li>
	              <a href="movie.html" class="movie">Video-Datei</a>
	            </li>
	          </ul>
	         <div class="breaker"></div>
	        <span class="linkeuntereeecke"></span>
	        <span class="rechteuntereecke"></span>
	       </div>
      </div>
Gibt es da nicht eine weitere Möglichkeit?

Gruß
 
Eine andere Möglichkeit sehe ich nicht, zumal das DIV.wrapper die entsprechenden Bereiche zusammenhält und für eine Strukturierung sorgt.

Mein Tipp: nimm das DIV, es kostet dich keinen Cent ;)
 
Hallo michaelsinterface,

ich denke ich werde es so machen, hast recht das die Elemente zusammen gehören,
dann können die beiden auch in einem eigenen Block sitzen.


Gruß
Oli
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück