CODEWITHSUNDEEP
htmlcss
user1566515
user1566515

Reputation: 1681

Line after a paragraph with an image

I have a paragraph with an image aligned to the left and a description to the right. The image is higher than the text. Here is an example:

enter image description here

Now, how can I make sure that the next paragraph starts below the image? Is it possible without putting several <br> before the next paragraph?

I tried putting an image inside <p> tags, <div> tags. This should be pretty straightforward, but I can't figure it out.

Upvotes: 0

Views: 96

Answers (3)

Tushar
Tushar

Reputation: 4418

Check this demo.

you need to wrap the <p> inside and <div> and target the p:first-child.

Upvotes: 1

Shital Shah
Shital Shah

Reputation: 68728

To achieve the result you want to use, you need to use float:left on image. This makes image just float on the left side while all the text flowing next to it. When you want next element to not flow around the image you need to clear the float. There are many ways clear the float but the simplest is just clear:both. Here's very good article that describes this in more details.

Here's sample HTML code. You can play around with it at http://jsbin.com/qilup/1/edit.

<html>
<body>
  <div>
    <img style="float:left" src="http://upload.wikimedia.org/wikipedia/commons/d/de/POL_apple.jpg" width=100px height=100px/> 
    Jar jar bins loves lits of apples! Jar jar bins loves lits of apples! Jar jar bins loves lits of apples! Jar jar bins loves lits of apples!
  </div>
  <div style="clear:both"/>
  <p>
    <strong>Next Paragraph is here</strong>  
  </p>
</body>
</html>

Upvotes: 0

Abhinab Kanrar
Abhinab Kanrar

Reputation: 1552

Try this:

<div id="upperdiv"><img src="yoursourcename"/><p>Eat fruits.....not kidding!</p></div>
<div id="lowerdiv">next paragraph.....</div>

Automatically your next paragraph should start in lower div now.

Upvotes: 1

Related Questions