Image left, text and header to the right aligned top in HTML and CSS

Question

This question was posted multiple times and I had a look at this post, but can't figure out why it doesn't work in my case.

The images are at the left and the texts are on the right but the texts are displayed below the images and not side by side.

HTML:

<section id="my-team">
  <div class="container">
    <h1>Thats my Title</h1>
    <div class="team">
        <div class="post-thumb"><img src="./img/Team/picture1.jpg"></div>
        <div class="post-content">
          <h3 class="post-title">Team Member 1</h3>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="post-thumb"><img src="./img/Team/picture2.jpg"></div>
        <div class="post-content">
          <h3 class="post-title">Team Member 2</h3>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="post-thumb"><img src="./img/Team/picture3.jpg"></div>
        <div class="post-content">
          <h3 class="post-title">Team Member 3</h3>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
  </div>
</section>

CSS:

#my-team .team {
    margin: 20px 20px 0 0;
    overflow:auto;
}

#my-team .post-thumb {
    float:left;
}

#my-team .post-thumb img {
    display:block;
    width:30%;
    height:30%;
}
#my-team .post-content {
    margin-left: 33%
}

#my-team .post-title {
    font-weight: bold;
    font-size: 200%
}

score 1 · Accepted Answer · answered Sep 08 '19 at 12:22

You should wrap each row by a div (with class member). And use flex instead of mixing float.

Here a code snippet:

#my-team .team {
    margin: 20px 20px 0 0;
    overflow:auto;
}

#my-team .member {
    display: flex;
    margin-bottom: 10px;
}

#my-team .post-thumb {
    margin-right: 10px;
}

#my-team .post-thumb img {
}

#my-team .post-content {
}

#my-team .post-title {
    margin-top: 0;
    font-weight: bold;
    font-size: 200%
}

<section id="my-team">
  <div class="container">
    <h1>Thats my Title</h1>
    <div class="team">
      <div class="member">
        <div class="post-thumb"><img src="https://via.placeholder.com/150"></div>
          <div class="post-content">
            <h3 class="post-title">Team Member 1</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
          </div>
        </div>
        <div class="member">
          <div class="post-thumb"><img src="https://via.placeholder.com/150"></div>
          <div class="post-content">
            <h3 class="post-title">Team Member 2</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
          </div>
        </div>
        <div class="member">
          <div class="post-thumb"><img src="https://via.placeholder.com/150"></div>
          <div class="post-content">
            <h3 class="post-title">Team Member 3</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
          </div>
        </div>
    </div>
  </div>
</section>

Image left, text and header to the right aligned top in HTML and CSS

1 Answers1