CODEWITHSUNDEEP
csslayouthtml
tanyx
tanyx

Reputation: 13

How to position images next to text using CSS

I have problem with CSS with two divs. My first div contain texts while second div contains images. I need to put the image div in top right corner of text div.

My div structures as below:

<div class="text">text text text .... more text</div>
<div class="images">image image</div>

I want to archieve this:

========================

text text - image -

text text - image -

text text text text

text text text text

text text text text

=========================

I illustred this problem with an image: enter image description here

How to achieve this?

Upvotes: 0

Views: 594

Answers (2)

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174957

Float the image?

<style>.images { float: right; }</style>

<div class="images">image image</div>
<div class="text">text text text .... more text</div>

Live Example - This example demonstrates the principle. It has more styles to make it look nicer, but it will work without them. Play with it and see what I mean.

Upvotes: 3

GlennG
GlennG

Reputation: 3000

If you reformat the HTML to put the images in the text , you can float the images within that container and the text will flow around it.

<style>
  img { float:right; }
</style>
<div>
    <img src="image1.png">
    <img src="image1.png">
    Lorum ipsum .....
</div>

Placing the images into a different container means they're 'separated' from that text, so the text can't flow.

Upvotes: 2

Related Questions