CODEWITHSUNDEEP
htmlcsscss-float
mr_app
mr_app

Reputation: 1312

Floating Text around image, which is positioned: bottom-right

Im searching for a way, to float text around an bottom-right positioned image.

Here my not working version http://jsfiddle.net/xaqyb/

HTML

<div id="box">
<img width="120" src="http://www.ordnung-statt-chaos.de/wp-content/themes/thesis/rotator/sample-4.jpg" />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
</div>

CSS

#box { 
    width: 250px; 
    min-height: 150px; 
    position: relative; 
    border: 1px solid #ccc; 
   background: #f7f7f7; 
    padding: 10px; 
}

#box img {
    display: block; 
    float: right; 
}

Any Ideas?

Upvotes: 1

Views: 1046

Answers (1)

Saeed
Saeed

Reputation: 3775

u can use span into p tag and then put img into span for example :

<div id="wrapper">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,<span>
<img width="100px" src="http://www.ordnung-statt-chaos.de/wp-content/themes/thesis/rotator/sample-4.jpg" />
</span> no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

and this css style is

#wrapper { width: 250px; min-height: 150px; border: 1px solid #ccc;background:#f7f7f7; padding: 10px }
#wrapper img { display: block}
#wrapper span{display: block;float: right;}

Upvotes: 3

Related Questions