CODEWITHSUNDEEP
htmlcss
Prokop Hanzl
Prokop Hanzl

Reputation: 154

How to have some text to the right of an image and some under it

I'm making a website and I've come across this problem: I need an image with dynamic size (25% to be exact) to have some text to the right of it and some under it.

I know that text can be put to the right of the image using float: right, but that makes it impossible to put any text always under the image.

Here's a jsfiddle: https://jsfiddle.net/7r51y7d4/2/

Since the image has a dynamic size, I can't just add lots of line breaks, because not only would the code be ugly, but it wouldn't work well on any device with a different screen resolution than mine.

Putting the image and the right text in a div won't help because the div will only wrap around the text, leaving the image sticking out through the div's border.

If JavaScript is needed, then so be it, however, I need a PHP-free solution. (pure HTML/CSS would be nice, though)

Upvotes: 2

Views: 92

Answers (4)

Allie
Allie

Reputation: 11

Target your second paragraph with CSS and use clear:both;

FOR EXAMPLE:

HTML Code:

<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
  I want this text to be to the right of this image
</p>
<p id="secondParagraph">
  I want this text to be under the image
</p>

CSS Code:

img {
      float: left;
      margin: 8px;
    }

#secondParagraph {
      clear:both;  
    }

I would also set your 25% width with CSS as well. It is best to do all styling externally with CSS, instead of in-line with HTML. Easier to manage.

Upvotes: 0

P.S.
P.S.

Reputation: 16384

Looks like you want the div with clear: both CSS rule, for more info: https://www.w3schools.com/cssref/pr_class_clear.asp

img {
  float: left;
  margin: 8px;
}

.clear {
  clear: both;
}
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
  I want this text to be to the right of this image
</p>
<div class="clear"></div>
<p>
  I want this text to be under the image
</p>

And here is the fiddle: https://jsfiddle.net/7r51y7d4/4/

Upvotes: 1

Somrlik
Somrlik

Reputation: 740

You can use the clear property to specify that the text should be inserted after floating elements.

<p style="clear: both;">
    Lorem ipsum
</p>

JSFiddle: https://jsfiddle.net/7r51y7d4/3/

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272723

Simply use clear:both to clear floating and the second text will go under the image :

img {
  float: left;
  margin: 8px;
}
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
  I want this text to be to the right of this image
</p>
<div style="clear:both"></div>
<p>
  I want this text to be under the image
</p>

Upvotes: 1

Related Questions