CODEWITHSUNDEEP
css
Starkey
Starkey

Reputation: 9781

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

This is probably a simple question, but I can't figure it out. I would like to use CSS to put an image on the right side of a page and not wrap text around it. I would like it like this:

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

If I do a float:right on the image, I get this:

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 to do this, but I would like pure CSS.

Upvotes: 7

Views: 35591

Answers (2)

Ross
Ross

Reputation: 17977

<div>
        <img src="img.jpg" style="float:right;" />
        <div style="clear:right;">
            <!-- text here -->
        </div>

</div>

perhaps?

Upvotes: 5

Rohrbs
Rohrbs

Reputation: 1855

Something similar to this should work:

<div>
  <div style="width: 100%">
    <img style="float:right;">
  </div>
  <div>
    text
  </div>
</div>

Upvotes: 12

Related Questions