How do I set an image to the left of a paragraph?

Question

How Do I set an image to be side by side with the text? This is what I have, not sure what I am doing wrong. Thank you!

.aboutme {
  white-space: normal;
  word-wrap: break-word;
  font-family: proxima-nova, Times New Roman;
  color: rgb(196, 191, 181);
  font-weight: 400;
  font-size: 18px;
  font-style: normal;
  text-align: left;
  height: auto;
  width: auto;
  margin: 0;
  line-height: 1.7em;
  float: right;
}

.homepageimgdef {
  max-width: 500px;
  height: 500px;
  border-radius: 50%;
  display: block;
  float: left;
}

<div>
  <p class="aboutme">
    "Paragraph text"
  </p>
  <img class="homepageimgdef" src="./HomePagePictureBlackWhite.jpg" alt="LeeBlackWhite">
</div>

@m4n0 Using floats is very appropriate for positioning images in-and-around text, which you can't do with flexbox. The problem here is that _only_ the `` should have `float` set - and the HTML needs editing to bring the `` element to the start of the inside of the `
`. — Dai, Jun 08 '22 at 08:20
@Dai For that we can use positioning methods with flexbox too. But it was just an advice for the current trends and to make life easier :) — m4n0, Jun 08 '22 at 08:26
@m4n0 What "positioning methods" are you referring to, exactly? You can't use flexbox to control the layout of individual `#text` nodes... — Dai, Jun 08 '22 at 08:27
The OP wants the image side by side. Did he mention he wants inside of it or something? — m4n0, Jun 08 '22 at 08:35

score 1 · Answer 1 · edited Jun 08 '22 at 08:27

As @m4n0 comment says, use a flexbox.

Your code should look like

.aboutme {
  white-space: normal;
  word-wrap: break-word;
  font-family: proxima-nova, Times New Roman;
  color: rgb(196, 191, 181);
  font-weight: 400;
  font-size: 18px;
  font-style: normal;
  text-align: left;
  height: auto;
  width: auto;
  margin: 0;
  line-height: 1.7em;
}

.homepageimgdef {
  max-width: 500px;
  height: 500px;
  border-radius: 50%;
}

.my-flex-box {
  display: flex;
  align-items: center; /**remove this if you want to make the text start at the top**/
}

<div class="my-flex-box">
  <p class="aboutme">
    "Paragraph text"
  </p>
  <img class="homepageimgdef" src="https://i.stack.imgur.com/Nx6Dd.jpg?s=256&g=1" alt="LeeBlackWhite">
</div>

You can also use this stackoverflow reference if you don't want to use flexbox https://stackoverflow.com/questions/19179424/how-to-wrap-text-around-an-image-using-html-css?noredirect=1&lq=1 — Mike Tabag Estonanto, Jun 08 '22 at 08:31

score 0 · Answer 2 · answered Jun 08 '22 at 08:20

0

You'll need to remove the float from both selectors, remove text-align from the text, and in the div, useflexbox to align your HTML components they way that you want.

.img-and-text {
  display: flex;
}

.aboutme {
  white-space: normal;
  word-wrap: break-word;
  font-family: proxima-nova, Times New Roman;
  color: rgb(196, 191, 181);
  font-weight: 400;
  font-size: 18px;
  font-style: normal;
  text-align: left;
  height: auto;
  width: auto;
  margin: 0;
  line-height: 1.7em;
}

.homepageimgdef {
  max-width: 500px;
  height: 500px;
  border-radius: 50%;
  display: block;
  float: left;
}

<div class="img-and-text">
  <img class="homepageimgdef" src="https://images.unsplash.com/photo-1648737155328-0c0012cf2f20?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=400&q=60" alt="LeeBlackWhite">
  <p class="aboutme">
    "Paragraph text"
  </p>
</div>

answered Jun 08 '22 at 08:20

manjiro sano

784
3
15

Using flexbox means you can't make the text wrap-around the image though. – Dai Jun 08 '22 at 08:20
When you say `text wrap-around the image`, you mean making the text go under the image? – manjiro sano Jun 08 '22 at 08:22
If by "under" you mean _behind_ then no. I mean like this: https://stackoverflow.com/questions/19179424/how-to-wrap-text-around-an-image-using-html-css – Dai Jun 08 '22 at 08:23
Yah that's what I meant. You do have a point, I assume he wanted to only make it align to the left, but if he wanted the example that you've sent, `flexbox` is not the right thing then. – manjiro sano Jun 08 '22 at 08:24

score 0 · Answer 3 · answered Jun 08 '22 at 08:23

I would suggest putting your content into divs so that you may have more control over your elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
.container{
    display: flex;
 vertical-align: middle;
 margin: 0 auto;
 justify-content: left;
 align-items: center;
 gap:10px;
}
    </style>
</head>
<body>
<div class="container">
    <div>
        <img src="./HomePagePictureBlackWhite.jpg" alt="LeeBlackWhite">
    </div>
    <div>
        <p>
          "Paragraph text"
        </p>
    </div>
    
</div>
 
</body>
</html>

"I would suggest putting your content into divs so that you may have more control over your elements." - please explain your rationale here - exactly what control does [divitis](https://csscreator.com/divitis) add that we don't already have? — Dai, Jun 08 '22 at 08:28

How do I set an image to the left of a paragraph?

3 Answers3