SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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&#37;*/
    overflow: hidden;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    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.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,595
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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..
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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 I'm gonna use overflow:hidden every chance I get

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,595
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Not every chance you get, just when you need to contain your floats (or clip content )
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,595
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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 .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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 : )


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •