 <p>because your <code>.column</code> divs are <code>float:left;</code> you need a container with <code>clear:both;</code> after the columns:</p> <pre><code>&lt;section&gt; &lt;h4&gt;WHAT WE DO&lt;/h4&gt; &lt;h2&gt;HEADING&lt;/h2&gt; &lt;div class="column"&gt; &lt;div class="item"&gt;&lt;/div&gt; &lt;h3&gt;ITEM1&lt;/h3&gt; &lt;p&gt;Necessitatibus ipsa ex hic sunt maxime.&lt;/p&gt; &lt;/div&gt; &lt;div class="column"&gt; &lt;div class="item"&gt;&lt;/div&gt; &lt;h3&gt;ITEM2&lt;/h3&gt; &lt;p&gt;Molestias ipsum ex deleniti illo qui obcaecati repellat.&lt;/p&gt; &lt;/div&gt; &lt;div class="column"&gt; &lt;div class="item"&gt;&lt;/div&gt; &lt;h3&gt;ITEM3&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt; &lt;/div&gt; &lt;div class="clearer"&gt;&lt;/div&gt; &lt;/section&gt; </code></pre> <p>CSS</p> <pre><code>.clearer { clear:both; } </code></pre> <p><a href="http://codepen.io/anon/pen/myvwNY" rel="nofollow">http://codepen.io/anon/pen/myvwNY</a></p> <p>Without the <code>clear</code> the container the floating divs are in has no height.</p>