✔ Außenabstand zum <div>-Container für Text definieren?

[preko]

Hi,

ich habe ein Außencontainer ("Content") und einen anderen, darin befindlichen Container ("Bild") -> s. angehängtes Bild.

Ich möchte nun den Container Bild für ein - je nach Seite wechselndes - Bild verwenden. Der Text im Container "Content" soll um den Container "Bild" fließen/umbrechen, ohne dahinter zu verschwinden. Ist das Bild "zuende", soll der Text dann die komplette Breite des Containers "Content" nutzen.

Gibt es eine CSS (oder andere) Formatierungsmöglichkeit um dieses zu bewerkstelligen? Mir sind gerade die Ideen ausgegangen...


Beste Grüße!

 

[hela]

Hallo,

einfach mal nach den Suchworten "css float" googeln. Sogar Wikipedia liefert ein Beispiel dazu.

 

[preko]

@hela:

float ist mir durchaus ein Begriff!

Ich möchte aber nicht das Bild-div rechts- bzw. linksseitig ausrichten, sondern den Text aus einem div (Container) um einen anderen fließen lassen. Es geht also nicht um eine Containerpositionierung, sondern um eine individuelle Textflußeigenschaft.

Beste Grüße!

 

[hela]

Ich bin mir nicht sicher, ob ich es jetzt richtig verstanden habe. aber wenn du auf so was aus bist "Tracking your images", dann wirst du vermutlich enttäuscht sein. Die Seite besteht aus vielen schmalen Blockelementen mit unterschiedlicher Breite, die links gefloatet sind und so den Text "wegdrücken".

 

[djheke]

@hela:

float ist mir durchaus ein Begriff!

Ich möchte aber nicht das Bild-div rechts- bzw. linksseitig ausrichten, sondern den Text aus einem div (Container) um einen anderen fließen lassen. Es geht also nicht um eine Containerpositionierung, sondern um eine individuelle Textflußeigenschaft.

Wie sonst soll dein Bild auf die rechte Seite kommen. Übrigens ist float ganau dafür eingeführt worden.

Beispiel:

 #content {
 background:#add;
}

#content p {
 overflow:hidden;
 padding:10px;
}

#content p img {
 margin:5px;
 padding:5px;
 border:1px solid #a33;
 width:100px;
} 

.flinks {
 float:left;
}

.frechts {
 float:left;
}

<p><img class="flinks" src="bild.jpg" alt="bild" width="200px">Lorem ipsum dolor ...</p>

http://www.gipspferd.de/forumhilfe/float/

 

[preko]

@ djheke:

Aaahhhh! Jetzt hats geklingelt! Ich hatte das Bild in einen div-Container gepackt und nicht das Image-Attribut mit einer entsprechenden class-Anweisung ausgestattet!

Super, herzlichen Dank - das war was ich benötigt habe laut Beispiel. Werde es gleich ausprobieren.

Beste Grüße!