align image and text side by side in html

Question

I kept image first and text next hoping to have it to the right of image neatly formatted, but this is the result.

Can anyone pls help me out with this? I need text to right that too not stuck to right border, just in middle of image and border. and also next div should component should come below these two.

img {
  display: block;
  object-fit: cover;
}

#photo {
  position: absolute;
  width: 50%;
  height: 800px;
  transform: scale(0.8);
}

#About_Me {
  word-wrap: break-word;
  position: relative;
  color: white;
  right: 0;
  ba ckground-color: rgb(255, 38, 0);
  border-radius: 10px;
}

<div id="Photo">
  <img id="photo" src="https://via.placeholder.com/800"><br>
</div>

<div id="About_Me">
  .......................................Miusov, as a man man of breeding and deilcacy, could not but feel some inwrd qualms, when he reached the Father Superior's with Ivan: he felt ashamed of havin lost his temper. He felt that he ought to have disdaimed
  that despicable wretch, Fyodor Pavlovitch, too much to have been upset by him in Father Zossima's cell, and so to have forgotten himself. "Teh monks were not to blame, in any case," he reflceted, on the steps. "And if they're decent people here (and
  the Father Superior, I understand, is a nobleman) why not be friendly and courteous withthem? I won't argue, I'll fall in with everything, I'll win them by politness, and show them that I've nothing to do with that Aesop, thta buffoon, that Pierrot,
  and have merely been takken in over this affair, just as they have."
</div>

You should use either [Floats](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats), [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) or [Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) to do that. — DavidDomain, Aug 04 '21 at 15:52
Rather than being concerned about what your content _is_, just look to established layout grids. Then put your stuff inside. Flexbox is probably best here. — isherwood, Aug 04 '21 at 16:07

score 2 · Answer 1 · answered Aug 04 '21 at 15:56

You can use flexbox!

Here:

.flex-container {
  display: flex;
  flex-direction: row;
}

.flex-left {
  width: 55%;
  height: 100vh;
  margin: 5px;
  padding: 5px;
  border: 2px solid red;
}

.flex-right {
  width: 45%;
  margin: 5px;
  padding: 5px;
  border: 2px solid green;
}
img {
  width: 75%;
  height: auto;
}

<div class="flex-container">
    <div class="flex-left">
  <img src="https://techcrunch.com/wp-content/uploads/2020/08/ZinBoats_Top_1.jpg" alt="Boat">
    </div>
    <div class="flex-right">
        .......................................Miusov, as a man man of breeding and deilcacy, could not but feel some inwrd qualms, when he reached the Father Superior's with Ivan: he felt ashamed of havin lost his temper. He felt that he ought to have disdaimed that despicable wretch, Fyodor Pavlovitch, too much to have been upset by him in Father Zossima's cell, and so to have forgotten himself. "Teh monks were not to blame, in any case," he reflceted, on the steps. "And if they're decent people here (and the Father Superior, I understand, is a nobleman) why not be friendly and courteous withthem? I won't argue, I'll fall in with everything, I'll win them by politness, and show them that I've nothing to do with that Aesop, thta buffoon, that Pierrot, and have merely been takken in over this affair, just as they have."
    </div>
</div>

@SaiRahul anytime! If my answer helped please make sure to accept it :) — BeerusDev, Aug 04 '21 at 15:58

Roko C. Buljan · Answer 2 · 2021-08-04T16:06:33.890

Use classes, why repeat yourself if you need a similar container in the future
Use CSS flexbox

/*QuickReset*/ * {margin:0; box-sizing:border-box;}

.About {
  display: flex;
}

.About > * {
  flex: 1;
  margin: 10px;
}

<div class="About" id="about">
  <img class="About-image" src="https://picsum.photos/id/237/150/150">
  <div class="About-content">
    Miusov, as a man man of breeding and deilcacy, could not but feel some inwrd qualms, when he reached the Father Superior's with Ivan: he felt ashamed of havin lost his temper. He felt that he ought to have disdaimed that despicable wretch, Fyodor Pavlovitch,
    too much to have been upset by him in Father Zossima's cell, and so to have forgotten himself. "Teh monks were not to blame, in any case," he reflceted, on the steps. "And if they're decent people here (and the Father Superior, I understand, is a
    nobleman) why not be friendly and courteous withthem? I won't argue, I'll fall in with everything, I'll win them by politness, and show them that I've nothing to do with that Aesop, thta buffoon, that Pierrot, and have merely been takken in over this
    affair, just as they have."
  </div>
</div>

If you want your image to never be taller than the accompanied text content :

/*QuickReset*/ * {margin:0; box-sizing:border-box;}

.About {
  display: flex;
}

.About>* {
  flex: 1;
  margin: 10px;
}

.About-image {
  position: relative;
}

.About-image img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="About" id="about">
  <div class="About-image">
    <img src="https://picsum.photos/id/237/150/150">
  </div>
  <div class="About-content">
    Miusov, as a man man of breeding and deilcacy, could not but feel some inwrd qualms, when he reached the Father Superior's with Ivan: he felt ashamed of havin lost his temper. He felt that he ought to have disdaimed that despicable wretch, Fyodor Pavlovitch,
  </div>
</div>

score 0 · Answer 3 · answered Aug 04 '21 at 15:57

0

Consider window 100% width and Set the position absolute for About_Me.

#About_Me
{
  word-wrap: break-word;
  position: absolute;
  color: black;
  right: 0;
  width:50%;
  background-color: rgb(255, 38, 0);
  border-radius: 10px;

}

answered Aug 04 '21 at 15:57

Avani Patel

19
2

Absolute positioning tends to introduce hassle and usually isn't necessary. – isherwood Aug 04 '21 at 16:00

align image and text side by side in html

3 Answers3