title: How to correctly impose a background-color to a div wrapping article and aside in HTML/CSS?
body: <p>I want to give a background color for the portion covered by the <code>article</code> and the <code>aside</code> only, so i can give the impression that the <code>aside</code> has the same height as the <code>article</code> ( basically giving the same background color for the <code>aside</code> and the <code>div</code> wrapping both <code>aside</code> and <code>article</code>)</p>
  
  <pre><code>       &lt;div style="background-color:#cccccc" class="clear_fix"&gt;
           &lt;p&gt; This is where the container starts !!!&lt;/p&gt;
           &lt;p&gt; Why the div stops here ???!!!!&lt;/p&gt;
           &lt;article&gt;
              &lt;h2&gt; Meanwhile, Let's learn about Tesla &lt;/h2&gt;
              &lt;p&gt;Tesla's achievements and his abilities as a showman&lt;/p&gt;
           &lt;/article&gt;
           &lt;aside&gt;
              &lt;h2&gt; Brand-new and Used cars &lt;/h2&gt;
              &lt;p&gt; Buy your first car starting from 0.99 $.&lt;/p&gt;
           &lt;/aside&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>Here is the style.css related to the tags above.</p>
  
  <pre><code>article {
  width:716px;
  background-color:#87ceeb;
  box-shadow: 0px 0px 4px 4px #a9a9a9;
  padding-top:20px;
  float:left;
  margin-top: 4px;
  margin-bottom: 4px;
  }
  aside {
  width:240px;
  float:left;
  padding-top:20px;
  background-color:#fff5dd;
  margin-top:4px;
  margin-left:4px;
  box-shadow:0px 0px 4px 4px #a9a9a9;
  }
  .clear_fix {
  clear:both;
  }
  </code></pre>
  
  <p>But what i get, is that the background color of the <code>div</code> only affects the two first <code>p</code> tags.</p>
  
  <p><img src="https://i.stack.imgur.com/4D7II.png" alt="enter image description here"></p>
  
  <p>Obviously, this is not what i intended to do by wrapping everything with a <code>div</code>.</p>
  
  <p>Do you have an idea why the <code>div</code> background color in my case does not extend below the <code>article and the</code>aside` ?</p>
  
  <p>Thanks.</p>