SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make footer adapt to height of content when it is longer than the screen

    Hi,

    here is my problem and this is something I would like to learn how to do for ANY website I design :

    how to make the footer adapt to the height of the content?
    Basically when all my divs are in place it's great, then when I add content that is longer/higher than the div it is in, the content expands as it should BUT the footer remains in the same place, ie it doesn't get pushed down with the height of the content.

    I think this requires a .push but no matter where i put it in my html (before the footer, before the content, before the header, well i have tried ANYWHERE) and i give it the same height as my footer it does not work.

    So below is the html i have and the css to go with it without any push added in so you can see what i have built. I have made a content with 4 columns and i have purposefully made the third column very long at 800px to see how the footer would react.

    I have used only divs with NO absolute and NO relative positionning.

    HTML :

    <body onload="MM_preloadImages('images/contact-hover.jpg','images/work-hover.jpg')">

    <div id="header">
    <div id="logo"></div>
    <div id="languages"></div>
    <!-- end header --></div>

    <div id="container">
    <div id="menu"></div>
    <div id="gallery"></div>
    <div id="content">
    <div id="column1">111111</div>
    <div id="column2">2222222</div>
    <div id="column3">33333333</div>
    <div id="column4">44444444</div>
    <!-- end content --></div>
    <div id="social"></div>
    <!-- end container --></div>

    <div id="footer"></div>

    </body>

    css :

    @charset "utf-8";
    /* CSS Document */
    a img {
    border: none;
    }
    *{
    padding: 0;
    margin: 0;
    }
    body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #471619;
    }
    html,body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-image: url(images/bgd.jpg);
    background-repeat: repeat;
    }
    #header {
    background-color: #6F6;
    background-repeat: no-repeat;
    height: 167px;
    width: 950px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    }
    #container {
    width: 950px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    }
    #logo {
    background-color: #969;
    background-repeat: no-repeat;
    float: left;
    height: 167px;
    width: 292px;
    }
    #languages {
    background-color: #C03;
    background-repeat: no-repeat;
    float: left;
    height: 30px;
    width: 292px;
    margin-top: 120px;
    float : right;
    }
    #menu {
    background-color: #696;
    height: 42px;
    width: 950px;
    }
    #gallery {
    background-color: #FFF;
    height: 360px;
    width: 950px;
    }
    #content {
    background-color: #F90;
    height: 276px;
    width: 950px;
    }
    #column1{
    background-color: #009;
    padding-right: 10px;
    float: left;
    width: 227px;
    }
    #column2{
    background-color: #36C;
    padding-right: 10px;
    float: left;
    width: 227px;
    }
    #column3{
    background-color: #99C;
    padding-right: 10px;
    float: left;
    width: 227px;
    height:800px;
    }
    #column4{
    background-color: #3CF;
    float: left;
    width: 237px;
    }
    #social {
    height: 96px;
    width: 950px;
    background-color: #099;
    background-repeat: no-repeat;
    }
    #footer {
    height: 200px;
    background-color: #3F3636;
    width : 100%;
    }


    This is obviously simple but I am learning a lot at once and would really need to know this basic thing once and for all so I can do this for any site. Most searches i do on this come up with the sticky footer which is not what i want is it as my content is longer than the screen not shorter?

    Many thanks to all in advance

    Claire

  2. #2
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So you are trying to get your footer to appear below the long purple div?

    Try adding overflow:hidden to container. Since floats do not obey the regular flow, you run into issues like you have in your example. Overflow hidden on the container causes it to wrap around the floats so that if your content expands, the container wraps up the floats and therfore obeys the document flow the way you expect it to.

  3. #3
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi sdt76,

    wow thanks this seems to have fixed my problem, so thank you ever so much.
    Yes to answer your question, that was what i was asking.
    So to build any website which generally will be longer than the height of a computer screen, i should add overflow:hidden; to my container div?
    I have added it also to my div #social as it wasn't responding either and it pushes down as it should as well now too.

    Many thanks
    Claire

  4. #4
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lwlbar View Post
    So to build any website which generally will be longer than the height of a computer screen, i should add overflow:hidden; to my container div?
    Well, it's not really a matter of if it's longer than the height of the screen. It's more a matter of this: does your container, any container, have floats? If so, and you need to container to wrap around the floats for any reason, place overflow:hidden on the container and that's how you do it.

    Because those divs were outside the flow, they were ignoring the footer and passing right over them. The containing element was in the flow, and the overflow setting caused the containing element to wrap around the floats thereby placing by default, back in the document flow with the footer, and thereby able to interact with it the way you wanted.

  5. #5
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul had a better explanation here: http://www.sitepoint.com/forums/show...-margin-to-div


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
  •