Bg color override.

I have a layout set up, and I added a wrapper to keep everything in place, the wrapper's background is white, but now I'm trying to add a footer with a different colored background but for some reason it is still white.

This is the footer,

Code:

---

#footer{
        clear:both;
        margin: 0 auto;
border-top:solid 5px #150D0F;
background:#3FF;
padding-left: 10px;
font-size:13px;
height: 100%;
}

#footer h2 {
        font-size:18px;
        color:#666;
}

.left-foot{
float: left;
width: 200px;
padding-right: 10px;


}
.center-foot{
width: 354px;
float: left;
padding-right: 10px;
}
.right-foot{
float: right;
width: 225px;
}

---

and the wrapper,

Code:

---

#rapper {
    clear:both;
    width:860px;
    margin: 0 auto;
    background:#FFF;
    overflow: hidden;
}

---

This is the HTML code

Code:

---

<div id="rapper">
<div id="footer">
  <div class="left-foot">
        <h2>General Inquiries</h2> 
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae</p>
<p>
Phone- 303-333-333<br />
info@info.com<br />
inquiries@info.com<br />
webmaster@info.com<br />
</p><p>
We will respond as soon as we get your message</p>
        </div><!--end left-->
        <div class="center-foot">
        <h2>Our services</h2> 
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae</p>


<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae</p>
        </div><!--end center-->
        <div class="right-foot">
        <h2>Our Affiliates</h2> 
        <p><center><img src="images/ad.gif" /></center></p>
<p>
Click here for all of our affiliates.</p>
        </div><!--end right-->
</div> <!-- end footer -->
</div><!-- end rapper-->

---

You need to contain the floats in your footer, overflow:hidden will do that.

I would set haslayout for IE with a width including your padding and remove the height.

Code:

---

#footer{
clear:both;
margin: 0 auto;
border-top:solid 5px #150D0F;
background:#3FF;
padding-left: 10px;
font-size:13px;
width: 850px; /*height:100%*/
overflow: hidden;
}

---

Quote:

---

Originally Posted by Rayzur

You need to contain the floats in your footer, overflow:hidden will do that.

I would set haslayout for IE with a width including your padding and remove the height.

Code:

---

#footer{
clear:both;
margin: 0 auto;
border-top:solid 5px #150D0F;
background:#3FF;
padding-left: 10px;
font-size:13px;
width: 850px; /*height:100%*/
overflow: hidden;
}

---

---

Oh I thought overflow hidden was so if an element left the space it wouldn't show up.

That's the main job of overflow:hidden;. It will clip it if a width or height is set (if a width is set it will clip horizontally, if a height, vertically). If no height is set then it just does float containment (in this case)

However it, like superman, has a side job :). It wasn't an expected thing of overflow:auto/hidden, but it can contain floats, which is what Ray was telling you to do :). The containment that overflow:auto/hidden gives is like Clark Kent going into superman..;)

Quote:

---

Originally Posted by RyanReese

That's the main job of overflow:hidden;. It will clip it if a width or height is set (if a width is set it will clip horizontally, if a height, vertically). If no height is set then it just does float containment (in this case)

However it, like superman, has a side job :). It wasn't an expected thing of overflow:auto/hidden, but it can contain floats, which is what Ray was telling you to do :). The containment that overflow:auto/hidden gives is like Clark Kent going into superman..;)

---

Hahaha that was an awesome explanation :lol: I'm gonna use overflow:hidden every chance I get

Not every chance you get, just when you need to contain your floats (or clip content ;))

Quote:

---

I'm gonna use overflow:hidden every chance I get

---

To continue on what Ryan said, watch out: overflow:hidden has a Day Job! Hiding overflow!

A lot of the time, possibly most of the time, you will want browsers to allow children of boxes to be able to flow out of those boxes. CSS tooltips inside a restricted-sized container for example. If you are using overflow: hidden and you're losing stuff, missing text, then you know that's the issue.

Sometimes for that reason you end up needing to use some other technique to either clear floats or get them enclosed... there are about 4 or so techniques. overflow: hidden is just the easiest a lot of the time.

Quote:

---

Originally Posted by Stomme poes

To continue on what Ryan said, watch out: overflow:hidden has a Day Job! Hiding overflow!

A lot of the time, possibly most of the time, you will want browsers to allow children of boxes to be able to flow out of those boxes. CSS tooltips inside a restricted-sized container for example. If you are using overflow: hidden and you're losing stuff, missing text, then you know that's the issue.

Sometimes for that reason you end up needing to use some other technique to either clear floats or get them enclosed... there are about 4 or so techniques. overflow: hidden is just the easiest a lot of the time.

---

Off Topic:

I was going to use the batman analogy, day job being Bruce Wayne, night job batman :p.

Off Topic:

I've been saying "Day Job" for a while, as that's kinda its main purpose in life, whereas the enclosing of floats is a sort of happy incidental side effect. Some people seem to forget that it doesn't just enclose floats : )