CODEWITHSUNDEEP
htmlcssbackgroundformatting
Jason Posit
Jason Posit

Reputation: 1323

CSS: wrapper background does not extend to all divs contained therein

I have the following html:

<div class="wrapper">
<h1>Ipods</h1>  
                    <div class="main-topright-bottom">
                      <h1>Related Products</h1>
                      <div>Check items to add to the cart or <a href="#">select all</a>.</div>
                      <div class="relatedproduct">
                        <div class="relatedproductimage">
                          <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-YiokcA1U38PFCbIYklGbbqu-4E7gj6p-c4txmJjZxblroYu40A" />
                        </div>
                        <div class="relatedproducttext">
                          <div class="relatedproductheading">A red ipod nano.</div>
                          <div class="price">$140.00</div>
                          <div class="addtowishlist">Add to Wishlist</div>
                        </div>
                      </div>
                      <div class="relatedproduct">
                        <div class="relatedproductimage">
                          <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-YiokcA1U38PFCbIYklGbbqu-4E7gj6p-c4txmJjZxblroYu40A" />
                        </div>
                        <div class="relatedproducttext">
                          <div class="relatedproductheading">A blue ipod nano.</div>
                          <div class="price">$140.00</div>
                          <div class="addtowishlist">Add to Wishlist</div>
                        </div>
                      </div>
                    </div>
</div>

and css:

.wrapper { background: blue; }
.relatedproduct { clear: both; }
.relatedproductimage { float: left; }
.relatedproducttext { float: left; }

I want to know how come the blue background does not extend to the bottom div. What am I doin wrong?

enter image description here

http://jsfiddle.net/johngoche99/C9NKP/2/

Thanks.

Upvotes: 0

Views: 1279

Answers (2)

Ganesh Rengarajan
Ganesh Rengarajan

Reputation: 2006

change 

 .wrapper { background: blue; }

To

 .wrapper { background: blue;overflow:hidden;}

Upvotes: 1

xec
xec

Reputation: 18024

Floats aren't contained by default. You make it do this by floating the wrapper too, or giving it an overflow property.

.wrapper {
    overflow: hidden;
}

jsfiddle demo

Read http://colinaarts.com/articles/float-containment/ for another (better) alternative if you don't want to hide overflow as a side-effect.

More information at https://developer.mozilla.org/en-US/docs/Web/CSS/Block_formatting_context

Upvotes: 2

Related Questions