Home two <h4>, <img> and<p> tags are grouped in separate<div>s and I've used float for img, used <br> to separate each other <divs> but still they overlap

Questions

two <h4>, <img> and<p> tags are grouped in separate<div>s and I've used float for img, used <br> to separate each other <divs> but still they overlap

byMR

December 24, 2021

two h4, img and p tags are grouped in separate < div>s and I’ve used float for img, used
to separate from each other but still they overlap.

https://i.stack.imgur.com/SUxli.png
this is the image with the output.

I’m new to this, can anybody please help. Thank you.

img {
  width: 50%;
  height: auto;
  margin: 20px 10px 20px 0px;
  /* float: left; */
}

.service {
  margin: 20px auto 20px auto;
  text-align: left;
  line-height: 2;
}

    <div class="service">
    <h4>Lorem ipsum dolor sit amet</h4>
        <img src="image.jfif" alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus ab nulla dolorum autem nisi officiis blanditiis voluptatem hic, assumenda aspernatur facere ipsam nemo ratione cumque magnam enim fugiat reprehenderit expedita.</p>
      </div>
      <br>
      <div class="service">
        <h4>Lorem ipsum dolor sit amet</h4>
        <img src="image.jfif" alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus ab nulla dolorum autem nisi officiis blanditiis voluptatem hic, assumenda aspernatur facere ipsam nemo ratione cumque magnam enim fugiat reprehenderit expedita.</p>
      </div>

>Solution :

I would try nesting your code in a container that is flexed with a column flex-direction. Then I would put your <h4>‘s before the service div and flex that div also, but use a flex-direction: row; See the CSS changes I made.

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

p {
  padding: 10px;
  width: 500px;
  margin: auto;
}

img {
  width: 50%;
  height: auto;
  /* float: left; */
}

.service {
  text-align: left;
  line-height: 2;
  display: flex;
  flex-direction: row;
}

<div class="container">
   <h4>Lorem ipsum dolor sit amet</h4>
   <div class="service">
      <img src="https://dummyimage.com/600x300/000/fff" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus ab nulla dolorum autem nisi officiis blanditiis voluptatem hic, assumenda aspernatur facere ipsam nemo ratione cumque magnam enim fugiat reprehenderit expedita.</p>
   </div>
   <br>
   <h4>Lorem ipsum dolor sit amet</h4>
   <div class="service">
      <img src="https://dummyimage.com/600x300/000/fff" alt="">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus ab nulla dolorum autem nisi officiis blanditiis voluptatem hic, assumenda aspernatur facere ipsam nemo ratione cumque magnam enim fugiat reprehenderit expedita.</p>
   </div>
</div>