How to correctly impose a background-color to a div wrapping article and aside in HTML/CSS?

Question

I want to give a background color for the portion covered by the article and the aside only, so i can give the impression that the aside has the same height as the article ( basically giving the same background color for the aside and the div wrapping both aside and article)

       <div style="background-color:#cccccc" class="clear_fix">
         <p> This is where the container starts !!!</p>
         <p> Why the div stops here ???!!!!</p>
         <article>
            <h2> Meanwhile, Let's learn about Tesla </h2>
            <p>Tesla's achievements and his abilities as a showman</p>
         </article>
         <aside>
            <h2> Brand-new and Used cars </h2>
            <p> Buy your first car starting from 0.99 $.</p>
         </aside>
      </div>

Here is the style.css related to the tags above.

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;
}

But what i get, is that the background color of the div only affects the two first p tags.

Obviously, this is not what i intended to do by wrapping everything with a div.

Do you have an idea why the div background color in my case does not extend below the article and theaside` ?

Thanks.

Answer 1

Since you floated the <article> and the <aside> elements, they are out of the flow of the parent <div>.

To the style of the parent element, add the following property: overflow: auto or overflow: hidden.

<div style="background-color:#cccccc; overflow: auto;" class="clear_fix">

Why This Works

The reason the overflow property does the trick stems from how the CSS block formatting model works.

Specifically, the relevant specification is:
http://www.w3.org/TR/CSS21/visuren.html#block-formatting

Consider the following HTML snippet:

<div class="wrap">
    <p>Some text...</p>
    <div class="floated">Floated text</div>
</div>

In the Basic Case, all of these elements are in normal flow (no floats) and are formatted within the "block formatting context" defined by the root element of the page. So, they basically fill up the width of the page and, being block elements, are stacked one on top of the other.

Consider Case 1, in which we float .floated. The floated element is no longer in normal flow and it is positioned to the left edge of the parent container and adjacent to the bottom of the paragraph, which is the nearest block level element to the floated element.

The border of the parent element wraps around the normal flow child elements which is why the floated elements juts out (remember, the floated element is ignored when formatting the normal flow elements, which determines the height of the parent container).

Now, in Case 2, let's float .wrap. In this case, the parent element shrinks-to-fit the content, including both the <p> AND the .floated child. This is because div.wrap has now established a new block formatting context and as specified by the CSS rules, must enclosed all the edges of the boxes that it contains (including floats).

Finally, in Case 3, we declare overflow: hidden on .wrap in normal flow (not floated). Setting overflow to any value other than visible starts a new block formatting context. As such, .wrap still extends the full width of the page AND it now also contains all the edges of any floated child elements, so the border wraps around the floated element.

Demo Fiddle: http://jsfiddle.net/audetwebdesign/VXL4B/