Keep linked text next to floating image

Question

I am working on a responsive webpage that has photos of people who are floating IMGs next to some descriptive text about each person.

This works very well with smaller page widths, but when the page becomes wide, the text associated with the next person starts next to the previous face image.

I need a way to make text appear no higher than the top of a particular image.

I installed JSFiddle here .

img {
  float: left;
  clear: both;
  margin: 0 20px 20px 0;
}

<img src="https://placehold.it/300x300">
<h1>First person name</h1>
<p>A few paras of text.</p>
<img src="https://placehold.it/300x300">
<h1>Second person name</h1>
<p>A few paras of text.</p>

Run codeHide result

Note. clear: bothmust make sure that the second image does not float to the right of the first image.

EDIT: , DIV . , CMS , TinyMCE. - HTML. CSS.

Answer 1

float p, :

<div style="clear:both"></div>

:

#container img {
  float: left;
  margin: 0 20px 20px 0;
}

<div id="container">
  <img src="https://placehold.it/360x360">
  <h1>
    First person name
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis molestie in.
    Ut non diam non ligula aliquam iaculis vestibulum quis urna. Maecenas efficitur purus et elementum auctor. Praesent condimentum id sapien vitae tempor. Ut ultrices accumsan lectus, quis ullamcorper velit auctor at. Suspendisse bibendum, odio gravida
    rhoncus pretium, enim elit porta massa, quis sagittis dolor sapien vel nulla. Nullam et enim ac tellus aliquam pulvinar. Proin et bibendum dui.
  </p>
  <div style="clear:both"></div>
  <img src="https://placehold.it/360x360">
  <h1>
    Second person name
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis molestie in.
    Ut non diam non ligula aliquam iaculis vestibulum quis urna. Maecenas efficitur purus et elementum auctor. Praesent condimentum id sapien vitae tempor. Ut ultrices accumsan lectus, quis ullamcorper velit auctor at. Suspendisse bibendum, odio gravida
    rhoncus pretium, enim elit porta massa, quis sagittis dolor sapien vel nulla. Nullam et enim ac tellus aliquam pulvinar. Proin et bibendum dui.
  </p>
</div>

Hide result

, p:

p:after {
    display: block;
    content: '';
    clear: both;
}

:

#container img {
  float: left;
  margin: 0 20px 20px 0;
}
p:after {
    display: block;
    content: '';
    clear: both;
}

<div id="container">
  <img src="https://placehold.it/360x360">
  <h1>
    First person name
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis molestie in.
    Ut non diam non ligula aliquam iaculis vestibulum quis urna. Maecenas efficitur purus et elementum auctor. Praesent condimentum id sapien vitae tempor. Ut ultrices accumsan lectus, quis ullamcorper velit auctor at. Suspendisse bibendum, odio gravida
    rhoncus pretium, enim elit porta massa, quis sagittis dolor sapien vel nulla. Nullam et enim ac tellus aliquam pulvinar. Proin et bibendum dui.
  </p>
  <img src="https://placehold.it/360x360">
  <h1>
    Second person name
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis molestie in.
    Ut non diam non ligula aliquam iaculis vestibulum quis urna. Maecenas efficitur purus et elementum auctor. Praesent condimentum id sapien vitae tempor. Ut ultrices accumsan lectus, quis ullamcorper velit auctor at. Suspendisse bibendum, odio gravida
    rhoncus pretium, enim elit porta massa, quis sagittis dolor sapien vel nulla. Nullam et enim ac tellus aliquam pulvinar. Proin et bibendum dui.
  </p>
</div>

Hide result

Answer 2

Bootstrap

#container img {
 margin-bottom: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div id="container">
<div class="row">
  <div class="col-xs-6 col-sm-6">
    <img src="https://placehold.it/360x360">
  </div>
  <div class="col-xs-6 col-sm-6">
    <h1>First person name</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis molestie in. Ut non diam non ligula aliquam iaculis vestibulum quis urna. Maecenas efficitur purus et elementum auctor. Praesent condimentum id sapien vitae tempor. Ut ultrices accumsan lectus, quis ullamcorper velit auctor at. Suspendisse bibendum, odio gravida rhoncus pretium, enim elit porta massa, quis sagittis dolor sapien vel nulla. Nullam et enim ac tellus aliquam pulvinar. Proin et bibendum dui.
    </p>
  </div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-6">
    <img src="https://placehold.it/360x360">
  </div>
  <div class="col-xs-6 col-sm-6">
      <h1>Second person name</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id ex ut nunc pharetra congue. Morbi ut lectus vulputate nunc congue convallis. Nunc ultricies quam ac dolor tincidunt feugiat. Integer condimentum metus leo, a interdum felis molestie in. Ut non diam non ligula aliquam iaculis vestibulum quis urna. Maecenas efficitur purus et elementum auctor. Praesent condimentum id sapien vitae tempor. Ut ultrices accumsan lectus, quis ullamcorper velit auctor at. Suspendisse bibendum, odio gravida rhoncus pretium, enim elit porta massa, quis sagittis dolor sapien vel nulla. Nullam et enim ac tellus aliquam pulvinar. Proin et bibendum dui.
    </p>
  </div>
</div>

Hide result

Answer 3

divs -

.top-content:after, .top-content:before {
   display: block;
   content: "";
   clear: both;
   margin-bottom: 30px;
}