How to correctly apply background color to an article about packing a div and towards HTML / CSS?

Question

I want to give a background color for the part covered only by article and aside , so I can give the impression that aside is the same height as article (basically the same background color for aside and 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 learn about Tesla </h2> <p>Tesla 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 style associated with 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 I understand that the background color of the div only affects the first two p tags.

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

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

Thanks.

Answer 1

Since you posted the <article> and <aside> elements, they exit the parent <div> stream.

Add the following property to the style of the parent element: overflow: auto or overflow: hidden .

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

Why does it work

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

In particular, the relevant specification:
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 a normal stream (without floats) and are formatted in the "block formatting context" defined by the root element of the page. Thus, they basically fill the width of the page and, being elements of the block, stack one on top of the other.

Consider Case 1 , in which we .floated . The float element is no longer in the normal stream, and it is located at the left edge of the parent container and is adjacent to the bottom of the paragraph, which is the closest block-level element for the element to be moved.

The border of the parent element wraps around the children of the normal stream, so floating-point elements (remember that formatting elements of the normal stream ignores the moved element, which determines the height of the parent container).

Now, in case 2 , let float .wrap . In this case, the parent element is compressed to match the contents, including both the child <p> and .floated . This is due to the fact that div.wrap now established a new format for block formatting, and as defined by CSS rules, it must enclose all edges from the fields it contains (including floats).

Finally, in case 3, we declare overflow: hidden on .wrap in the normal stream (not floating). Setting overflow to any value other than visible starts a new block formatting context. So .wrap still extends the entire width of the page, and now it also contains all the edges of any movable children, so the border wraps around the floating element.

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

Answer 2

Your clear_fix class is clear_fix not doing its job.

Note FIDDLE , which simply switches the clearfix class to a container element. When clearfix not installed, it is very similar to what you experience.

Use this css for the clearfix class:

 .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; }