HTML - img with CSS and text

Question

I try to put a picture in the right side of the page. the problem is that there is a text near it, and in some browsers the picture hide the text. I use the next CSS for the <img> attribute:

.imgP
{
position:relative;
top:10px;
right: 10px;
float:right;
}

the text is the next element:

<p> bla bla bla... </p>

How can I change it, in order that the text would move automatically near the picture?

You can't use position and float together (get rid of the position). But you did not provide enough information, so we can't help you more. — Jaa-c
– Jaa-c, Commented Mar 29, 2013 at 21:34
A demo would be helpful. See: jsfiddle.net or codepen.io, placehold.it — cimmanon
– cimmanon, Commented Mar 29, 2013 at 21:36

Axel · Accepted Answer · 2013-03-29 21:36:10Z

1

What I think you're trying to achieve it text-wrapping on an image.

The principle for doing this is simple.

Create some HTML markup like this:

<img src="myimage.jpg" alt="" class="imgP" />
<p>My Paragraph text which will wrap around the image...</p>

And to make the text wrap the image, you simply float the image to the right:

.imgP
{
   float: right;
}

A float will cause the horizontal spacing that the image sits on to collapse, and cause the text to fill that area.

answered Mar 29, 2013 at 21:36

Axel

10.8k2 gold badges32 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML - img with CSS and text

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related