Geek Answers Handbook

CSS - Image on the right side of the page with text not wrapping it

This is probably a simple question, but I can’t understand. I would like to use CSS to place the image on the right side of the page and not wrap the text around it. I would like it to be like this:

  ------------
                 |  img |
                 |  |
                 ------------
 text text text text text text
 text ....

If I do float: directly on the image, I get the following:

  text text text ------------
 text text text |  img |
 text text text |  |
 text text text ------------
 text text text text text text
 text ...

I could easily use tables for this, but I would like to get pure CSS.

+4
source share
2 answers

Something similar to this should work:

<div> <div style="width: 100%"> <img style="float:right;"> </div> <div> text </div> </div>
+10
source 
 <div> <img src="img.jpg" style="float:right;" /> <div style="clear:right;"> <!-- text here --> </div> </div>

perhaps?

+5
source

More articles:


All Articles