HTML sections overlapping

Question

I have the following simple HTML layout

.section1 {
  background: red;
}

.section2 {
  background: green;
}

.section3 {
  background: yellow;
}

article {
  float: left;
  width: 33%;
}

<section class="section1">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id eros vel ex porta viverra ac sit amet quam. Morbi quis consequat dolor. Vestibulum ultricies leo ac orci fringilla, et congue erat euismod. Donec vestibulum nisi eu orci commodo congue.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium consectetur mi quis vehicula. Donec ac velit id mi facilisis luctus. Vivamus placerat eros vel quam placerat, a varius quam malesuada. Proin nec lectus ac augue varius hendrerit.
    Curabitur mattis dolor non arcu faucibus, at viverra purus feugiat. Suspendisse potenti. Nunc non metus eget ipsum efficitur tincidunt id eget elit. Donec ac molestie libero. In hac habitasse platea dictumst. Morbi eget fermentum orci, nec volutpat
    enim. Proin ac leo urna. Nam facilisis ut arcu eget interdum. Ut vulputate massa ut pretium accumsan. Nullam eros diam, elementum ac feugiat eu, hendrerit in sapien. Nullam accumsan arcu quis ante aliquam lacinia.
  </p>
</section>

<section class="section2">
  <p>
    Section 2 content
  </p>
  <article>
    Sed eget magna sit amet turpis elementum finibus. Mauris commodo porttitor nisl. Praesent dignissim vel mi quis vestibulum. Suspendisse porttitor magna sit amet eros semper, volutpat interdum nisl ultrices. Pellentesque habitant morbi tristique senectus
    et netus et malesuada fames ac turpis egestas. </article>
  <article>
    Fusce pretium neque non lorem scelerisque iaculis. Etiam porta gravida est rutrum porta. Nullam venenatis elit nec ipsum volutpat pretium. Nunc ut hendrerit est, in euismod sapien. Aliquam non nulla auctor, scelerisque ipsum id, mattis ex. </article>
  <article>
    Curabitur porta tincidunt erat ac sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
  </article>
</section>

<section class="section3">
  Section 3 content
</section>

The second and third sections are overlapping, what am I doing wrong?

Answer 1

The problem you're suffering is that elements with a float property are taken out of the document's normal flow when their position(s) and layout are calculated by the browser.

There are two easy ways to solve this problem, the first is to set overflow: hidden; to the parent element (in this case to the <section> element) in the CSS:

section {
  overflow: hidden;
}

.section1 {
  background: red;
}

.section2 {
  background: green;
}

.section3 {
  background: yellow;
}

article {
  float: left;
  width: 33%;
}

<section class="section1">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id eros vel ex porta viverra ac sit amet quam. Morbi quis consequat dolor. Vestibulum ultricies leo ac orci fringilla, et congue erat euismod. Donec vestibulum nisi eu orci commodo congue.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium consectetur mi quis vehicula. Donec ac velit id mi facilisis luctus. Vivamus placerat eros vel quam placerat, a varius quam malesuada. Proin nec lectus ac augue varius hendrerit.
    Curabitur mattis dolor non arcu faucibus, at viverra purus feugiat. Suspendisse potenti. Nunc non metus eget ipsum efficitur tincidunt id eget elit. Donec ac molestie libero. In hac habitasse platea dictumst. Morbi eget fermentum orci, nec volutpat
    enim. Proin ac leo urna. Nam facilisis ut arcu eget interdum. Ut vulputate massa ut pretium accumsan. Nullam eros diam, elementum ac feugiat eu, hendrerit in sapien. Nullam accumsan arcu quis ante aliquam lacinia.
  </p>
</section>

<section class="section2">
  <p>
    Section 2 content
  </p>
  <article>
    Sed eget magna sit amet turpis elementum finibus. Mauris commodo porttitor nisl. Praesent dignissim vel mi quis vestibulum. Suspendisse porttitor magna sit amet eros semper, volutpat interdum nisl ultrices. Pellentesque habitant morbi tristique senectus
    et netus et malesuada fames ac turpis egestas. </article>
  <article>
    Fusce pretium neque non lorem scelerisque iaculis. Etiam porta gravida est rutrum porta. Nullam venenatis elit nec ipsum volutpat pretium. Nunc ut hendrerit est, in euismod sapien. Aliquam non nulla auctor, scelerisque ipsum id, mattis ex. </article>
  <article>
    Curabitur porta tincidunt erat ac sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
  </article>
</section>

<section class="section3">
  Section 3 content
</section>

Another way is to use a pseudo-element, or an added child-element, set to clear: both; which will force that element to be displayed after the floated content and, not being floated itself, this forces the browser to include that element's position in the layout; first, using an added child element:

section::after {
  /* newline character: */
  content: "\A";
  /* forcing the element/pseudo-element to
     take 100% of the width of the parent;
     this could be replaced with:
       display: inline-block;
       width: 100%;
     but that's unnecessarily verbose and
     may cause problems because of padding
     and margins */
  display: block;
  /* forcing the element/pseudo-element to
     clear the preceding floats */
  clear: both;
}

section::after {
  content: "\A";
  display: block;
  clear: both;
}

.section1 {
  background: red;
}

.section2 {
  background: green;
}

.section3 {
  background: yellow;
}

article {
  float: left;
  width: 33%;
}

<section class="section1">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id eros vel ex porta viverra ac sit amet quam. Morbi quis consequat dolor. Vestibulum ultricies leo ac orci fringilla, et congue erat euismod. Donec vestibulum nisi eu orci commodo congue.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium consectetur mi quis vehicula. Donec ac velit id mi facilisis luctus. Vivamus placerat eros vel quam placerat, a varius quam malesuada. Proin nec lectus ac augue varius hendrerit.
    Curabitur mattis dolor non arcu faucibus, at viverra purus feugiat. Suspendisse potenti. Nunc non metus eget ipsum efficitur tincidunt id eget elit. Donec ac molestie libero. In hac habitasse platea dictumst. Morbi eget fermentum orci, nec volutpat
    enim. Proin ac leo urna. Nam facilisis ut arcu eget interdum. Ut vulputate massa ut pretium accumsan. Nullam eros diam, elementum ac feugiat eu, hendrerit in sapien. Nullam accumsan arcu quis ante aliquam lacinia.
  </p>
</section>

<section class="section2">
  <p>
    Section 2 content
  </p>
  <article>
    Sed eget magna sit amet turpis elementum finibus. Mauris commodo porttitor nisl. Praesent dignissim vel mi quis vestibulum. Suspendisse porttitor magna sit amet eros semper, volutpat interdum nisl ultrices. Pellentesque habitant morbi tristique senectus
    et netus et malesuada fames ac turpis egestas. </article>
  <article>
    Fusce pretium neque non lorem scelerisque iaculis. Etiam porta gravida est rutrum porta. Nullam venenatis elit nec ipsum volutpat pretium. Nunc ut hendrerit est, in euismod sapien. Aliquam non nulla auctor, scelerisque ipsum id, mattis ex. </article>
  <article>
    Curabitur porta tincidunt erat ac sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
  </article>
</section>

<section class="section3">
  Section 3 content
</section>

However since the problem is the use of float, it's even easier to solve the problem by avoiding the problem. The following approach uses CSS flex-box to prevent the problem arising:

.section1 {
  background: red;
}

.section2 {
  background: green;
  /* initiates the flex-box layout: */
  display: flex;
  /* allows the flex-item children
     to wrap to form a multi-row/column
     layout: */
  flex-wrap: wrap;
  /* setting the flex axes, and layout,
     to be row-based: */
  flex-direction: row;
}

.section3 {
  background: yellow;
}

.section2 p {
  /* defines how much the element
     will grow relative to other
     elements in the layout; this
     sets the <p> element to 100%
     width: */
  flex-grow: 100%;
  /* defines how much the element
     can shrink relative to other
     elements in the layout: */
  flex-shrink: 1;
}

.section2 article {
  flex-grow: 33%;
  flex-shrink: 1;
}

<section class="section1">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id eros vel ex porta viverra ac sit amet quam. Morbi quis consequat dolor. Vestibulum ultricies leo ac orci fringilla, et congue erat euismod. Donec vestibulum nisi eu orci commodo congue.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium consectetur mi quis vehicula. Donec ac velit id mi facilisis luctus. Vivamus placerat eros vel quam placerat, a varius quam malesuada. Proin nec lectus ac augue varius hendrerit.
    Curabitur mattis dolor non arcu faucibus, at viverra purus feugiat. Suspendisse potenti. Nunc non metus eget ipsum efficitur tincidunt id eget elit. Donec ac molestie libero. In hac habitasse platea dictumst. Morbi eget fermentum orci, nec volutpat
    enim. Proin ac leo urna. Nam facilisis ut arcu eget interdum. Ut vulputate massa ut pretium accumsan. Nullam eros diam, elementum ac feugiat eu, hendrerit in sapien. Nullam accumsan arcu quis ante aliquam lacinia.
  </p>
</section>

<section class="section2">
  <p>
    Section 2 content
  </p>
  <article>
    Sed eget magna sit amet turpis elementum finibus. Mauris commodo porttitor nisl. Praesent dignissim vel mi quis vestibulum. Suspendisse porttitor magna sit amet eros semper, volutpat interdum nisl ultrices. Pellentesque habitant morbi tristique senectus
    et netus et malesuada fames ac turpis egestas. </article>
  <article>
    Fusce pretium neque non lorem scelerisque iaculis. Etiam porta gravida est rutrum porta. Nullam venenatis elit nec ipsum volutpat pretium. Nunc ut hendrerit est, in euismod sapien. Aliquam non nulla auctor, scelerisque ipsum id, mattis ex. </article>
  <article>
    Curabitur porta tincidunt erat ac sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
  </article>
</section>

<section class="section3">
  Section 3 content
</section>

And, finally, using CSS grid layout:

.section1 {
  background: red;
}

.section2 {
  background: green;
  /* sets the grid layout, the child elements
     are automatically set to
     'display: grid-item': */
  display: grid;
  /* defines two rows, each with a 'size' of
     'min-content'; this causes the row to be
     large enough to show the content without
     the author needing to guess (or discover)
     the rendered height of the element: */
  grid-template-rows: repeat(min-content, 2);
  /* defines three columns, each the size of
     1fr (one fractional unit of the width
     available): */
  grid-template-columns: repeat(1fr, 3);
}

.section3 {
  background: yellow;
}

.section2 p {
  /* places the element in the
     first grid-row: */
  grid-row: 1;
  /* places the element in the
     first grid-column, and spans
     all three of those columns: */
  grid-column: 1 / span 3;
}

.section2 article {
  /* places the elements in the
     second grid-row; we don't define
     which of the columns the elements
     are placed in, instead leaving the
     browser to place them automatically: */
  grid-row: 2;
}

<section class="section1">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id eros vel ex porta viverra ac sit amet quam. Morbi quis consequat dolor. Vestibulum ultricies leo ac orci fringilla, et congue erat euismod. Donec vestibulum nisi eu orci commodo congue.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium consectetur mi quis vehicula. Donec ac velit id mi facilisis luctus. Vivamus placerat eros vel quam placerat, a varius quam malesuada. Proin nec lectus ac augue varius hendrerit.
    Curabitur mattis dolor non arcu faucibus, at viverra purus feugiat. Suspendisse potenti. Nunc non metus eget ipsum efficitur tincidunt id eget elit. Donec ac molestie libero. In hac habitasse platea dictumst. Morbi eget fermentum orci, nec volutpat
    enim. Proin ac leo urna. Nam facilisis ut arcu eget interdum. Ut vulputate massa ut pretium accumsan. Nullam eros diam, elementum ac feugiat eu, hendrerit in sapien. Nullam accumsan arcu quis ante aliquam lacinia.
  </p>
</section>

<section class="section2">
  <p>
    Section 2 content
  </p>
  <article>
    Sed eget magna sit amet turpis elementum finibus. Mauris commodo porttitor nisl. Praesent dignissim vel mi quis vestibulum. Suspendisse porttitor magna sit amet eros semper, volutpat interdum nisl ultrices. Pellentesque habitant morbi tristique senectus
    et netus et malesuada fames ac turpis egestas. </article>
  <article>
    Fusce pretium neque non lorem scelerisque iaculis. Etiam porta gravida est rutrum porta. Nullam venenatis elit nec ipsum volutpat pretium. Nunc ut hendrerit est, in euismod sapien. Aliquam non nulla auctor, scelerisque ipsum id, mattis ex. </article>
  <article>
    Curabitur porta tincidunt erat ac sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
  </article>
</section>

<section class="section3">
  Section 3 content
</section>

Answer 2

This is due to float nature. You'll need to use clearfix for section2:

/* clearfix */
.section2:after {
  content: "";
  display: table;
  clear: both;
}

Demo:

.section1 {
  background: red;
}

.section2 {
  background: green;
}

/* clearfix */
.section2:after {
  content: "";
  display: table;
  clear: both;
}

.section3 {
  background: yellow;
}

article {
  float: left;
  width: 33%;
}

<section class="section1">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id eros vel ex porta viverra ac sit amet quam. Morbi quis consequat dolor. Vestibulum ultricies leo ac orci fringilla, et congue erat euismod. Donec vestibulum nisi eu orci commodo congue.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium consectetur mi quis vehicula. Donec ac velit id mi facilisis luctus. Vivamus placerat eros vel quam placerat, a varius quam malesuada. Proin nec lectus ac augue varius hendrerit.
    Curabitur mattis dolor non arcu faucibus, at viverra purus feugiat. Suspendisse potenti. Nunc non metus eget ipsum efficitur tincidunt id eget elit. Donec ac molestie libero. In hac habitasse platea dictumst. Morbi eget fermentum orci, nec volutpat
    enim. Proin ac leo urna. Nam facilisis ut arcu eget interdum. Ut vulputate massa ut pretium accumsan. Nullam eros diam, elementum ac feugiat eu, hendrerit in sapien. Nullam accumsan arcu quis ante aliquam lacinia.
  </p>
</section>

<section class="section2">
  <p>
    Section 2 content
  </p>
  <article>
    Sed eget magna sit amet turpis elementum finibus. Mauris commodo porttitor nisl. Praesent dignissim vel mi quis vestibulum. Suspendisse porttitor magna sit amet eros semper, volutpat interdum nisl ultrices. Pellentesque habitant morbi tristique senectus
    et netus et malesuada fames ac turpis egestas. </article>
  <article>
    Fusce pretium neque non lorem scelerisque iaculis. Etiam porta gravida est rutrum porta. Nullam venenatis elit nec ipsum volutpat pretium. Nunc ut hendrerit est, in euismod sapien. Aliquam non nulla auctor, scelerisque ipsum id, mattis ex. </article>
  <article>
    Curabitur porta tincidunt erat ac sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
  </article>
</section>

<section class="section3">
  Section 3 content
</section>

But you can use much more modern and powerful flexbox approach instead of floats (so you can remove float styles):

.section1 {
  background: red;
}

.section2 {
  display: flex; /* new */
  flex-wrap: wrap; /* new */
  background: green;
}

.section2 p {
  width: 100%; /* new */
}

.section3 {
  background: yellow;
}

article {
  width: 33%;
}

<section class="section1">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id eros vel ex porta viverra ac sit amet quam. Morbi quis consequat dolor. Vestibulum ultricies leo ac orci fringilla, et congue erat euismod. Donec vestibulum nisi eu orci commodo congue.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium consectetur mi quis vehicula. Donec ac velit id mi facilisis luctus. Vivamus placerat eros vel quam placerat, a varius quam malesuada. Proin nec lectus ac augue varius hendrerit.
    Curabitur mattis dolor non arcu faucibus, at viverra purus feugiat. Suspendisse potenti. Nunc non metus eget ipsum efficitur tincidunt id eget elit. Donec ac molestie libero. In hac habitasse platea dictumst. Morbi eget fermentum orci, nec volutpat
    enim. Proin ac leo urna. Nam facilisis ut arcu eget interdum. Ut vulputate massa ut pretium accumsan. Nullam eros diam, elementum ac feugiat eu, hendrerit in sapien. Nullam accumsan arcu quis ante aliquam lacinia.
  </p>
</section>

<section class="section2">
  <p>
    Section 2 content
  </p>
  <article>
    Sed eget magna sit amet turpis elementum finibus. Mauris commodo porttitor nisl. Praesent dignissim vel mi quis vestibulum. Suspendisse porttitor magna sit amet eros semper, volutpat interdum nisl ultrices. Pellentesque habitant morbi tristique senectus
    et netus et malesuada fames ac turpis egestas. </article>
  <article>
    Fusce pretium neque non lorem scelerisque iaculis. Etiam porta gravida est rutrum porta. Nullam venenatis elit nec ipsum volutpat pretium. Nunc ut hendrerit est, in euismod sapien. Aliquam non nulla auctor, scelerisque ipsum id, mattis ex. </article>
  <article>
    Curabitur porta tincidunt erat ac sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
  </article>
</section>

<section class="section3">
  Section 3 content
</section>

Answer 3

This should work better than float:

article {
  display: inline-block;
  width:32%;
  vertical-align: top;
}

Fiddle: https://jsfiddle.net/kbennu/7z7m92fv/