Grow your CSS skills. Land your dream job.

Footer with a wrong white space below…

  • # July 27, 2009 at 7:47 am

    Hey guys!!

    I am trying to build a very simple layout, I have just three img closed in a div for each one and this div are just one after the other… so it’s just a simple ‘div after div’ in the body… just the only div #wrapper is a container for al those div…

    But the wrapper gives me a problem, even if I give it {height: 100%;} or even if I don’t give it height at all, it goes on down after the height of the #footer div, showing a big space at the bottom of the page…

    I can’t cut that white space out… just one thing more… the div #blocco-pag is in tha relative position to stay over the gray #footer… if this can help…

    I past the code:

    Code:
    body{
    margin: 0px;
    padding: 0px;
    height: 100%;
    overflow: auto;
    background: #0c617a;
    background-image: url(img/rep_bkg.png);
    background-repeat: repeat;

    }

    #wrapper{
    margin: auto;
    background-color: white;
    border-right: 1px solid white;
    border-left: 1px solid white;
    width: 1024px;

    }

    #header{
    background-image: url(img/header.png);
    width: 1024px;
    height: 246px;
    margin: auto;
    margin-bottom: 80px;

    }
    #ret_sup{
    background-image: url(img/ret_sup.png);
    width: 836px;
    height: 317px;
    margin: auto;

    }

    #blocco_pag{
    background-image: url(img/blocco_pag.png);
    width: 895px;
    height: 1046px;
    margin: auto;
    position: relative;
    z-index: 5;
    }

    #footer {
    background-image: url(img/footer_rep.png);
    background-repeat: repeat;
    width: 1024px;
    height: 350px;
    color: white;
    position: relative;
    bottom: 250px;

    }

    h6{
    padding-top: 230px;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    font-family: Adobe Caslon Pro,”Times New Roman”,Times,serif;
    }

    And html code:

    Code:

    Any suggest?? thank you !!!

    # July 27, 2009 at 8:23 am

    Sorry, which div are the images in? Are they side by side or stacked vertically?

    # July 27, 2009 at 8:41 am

    Any div has got an own img, loaded in the CSS, and all the div stuck vertically on the page… the #wrapper div is the container for all this vertical divs

    # July 27, 2009 at 8:45 am

    As you have given everything else a fixed height you may as well give the wrapper a fixed height too.

    # July 27, 2009 at 9:00 am

    @ apostrophe

    Thx for the advise! But this is a bad news for me… I used to thought that if I gave a percent% of height to the #wrapper div, I could add ay number of divs into it, and so the #wrapper just would followed the number and dimensions of div…

    This my thought and doubt come from a little experience making sites and templates with CSS, my attempt is to build a template that could be increase in the future just adding more div that I want… but always with the #footer at the bottom of the page…

    But… if you tell me that is not wrong to fixed a height to the #wrapper div I will do it… I just wish to be sure to don’t force my layout in a wrong way just from beginnings…

    PS: I see now that fixed heights are different for different browsers…

    # July 27, 2009 at 9:58 am

    No it is not a good idea to give the wrapper a fixed height but I am struggling to understand your code or see what you are trying to achieve.
    How about this:
    Make the wrapper position:relative and the footer position: absolute then position the footer -100px from the bottom.

    Code:
    #wrapper {
    position:relative;
    }

    #footer {
    position: absolute;
    bottom: -100px;
    }

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".