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

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 >
    "Paragraph text"
  </p>
  <img  src="./HomePagePictureBlackWhite.jpg" alt="LeeBlackWhite">
</div>

CodePudding user response：

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 >
  <p >
    "Paragraph text"
  </p>
  <img  src="https://i.stack.imgur.com/Nx6Dd.jpg?s=256&g=1" alt="LeeBlackWhite">
</div>

CodePudding user response：

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 >
  <img  src="https://images.unsplash.com/photo-1648737155328-0c0012cf2f20?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=400&q=60" alt="LeeBlackWhite">
  <p >
    "Paragraph text"
  </p>
</div>

CodePudding user response：

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 >
    <div>
        <img src="./HomePagePictureBlackWhite.jpg" alt="LeeBlackWhite">
    </div>
    <div>
        <p>
          "Paragraph text"
        </p>
    </div>
    
</div>
 
</body>
</html>