CODEWITHSUNDEEP
htmlcss
Nikola
Nikola

Reputation: 9

<p> is displayed under <img> tag without <br>

<img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/d1/d1a6cabea45b1f34f639b4f3dba8dd7af91072d4.jpg"><p>text 1</p>&nbsp;&nbsp;&nbsp;<p>text 2</p>

My text1 and text2 are going under the image but I didnt use <br> tag.
Is there any way to do this: 'img here' 'text1' 'text2' ? Thanks.

Upvotes: 0

Views: 243

Answers (5)

mzrnsh
mzrnsh

Reputation: 2360

Float is the right way to do this.

img {
  float: left;
  padding-right:5px;
}
<img src='http://placehold.it/220x220'>
<p>
 Some text here. 
</p>

<p>
 Some more text to follow. 
</p>

And this is not only my opinion. A quote from w3schools:

In its simplest use, the float property can be used to wrap text around images.

Upvotes: -1

b.curiouzmind
b.curiouzmind

Reputation: 13

It is better to always use a class and assign your styles to the class rather than to an element directly. This gives you better control over which element to apply a particular style to. 

.my-img,.text1,.text2 {
  display: inline-block;
  margin-right: 5px;
}
<img class="my-img" src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/d1/d1a6cabea45b1f34f639b4f3dba8dd7af91072d4.jpg"><p class="text1">text 1</p>&nbsp;&nbsp;&nbsp;<p  class="text2">text 2</p>

Upvotes: 0

Fedrich Rocher
Fedrich Rocher

Reputation: 9

CSS property called display:inline could be used !

 <img src=".."/>

 <p style="display:inline">text1</p>

 <p style="display:inline">text1</p>

Upvotes: 0

Prasath V
Prasath V

Reputation: 1356

Just add this to your css

img{
  display:inline;
}
p{
  display:inline;
}
<img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/d1/d1a6cabea45b1f34f639b4f3dba8dd7af91072d4.jpg"><p>text 1</p>&nbsp;&nbsp;&nbsp;<p>text 2</p>

Upvotes: 1

Super User
Super User

Reputation: 9642

You can use Following css for this

img, p {
    display:inline-block;
}

Upvotes: 1

Related Questions