Treehouse: Grow your CSS skills. Land your dream job.

Empty background space

  • # March 27, 2010 at 6:13 am

    Sorry for the bad title, but I dont know what its called. I have a background on a website, and when some of the pages are too short (see picture), I want the white content background to continue to the bottom. Hopefull some of you have a solution, because it has to work in different screen sizes (1024×768 etc…).

    Hopefull this picture can explain it, but ask if you want some code or more information.



    # March 27, 2010 at 7:02 am

    If the "Advertise Here" part is the footer, then position it to stick to the bottom of the browser window like so
    #footer {position: fixed; bottom: 0;}

    # March 27, 2010 at 8:45 am

    Thanks for your answer, but then this happens: … os/ex2.png

    Its not supposed to be nailed to the bottom, the white color just has to continue down the page.

    You can see a picture, how it looks on pages which are long enough here: … os/ex3.png

    # March 27, 2010 at 10:18 am

    If you posted a link it would be easier to help, otherwise it’s just a stab in the dark as I have no idea how you have coded your site :!:

    # March 27, 2010 at 10:56 am

    Take a look at this, it might help you out.

    # March 27, 2010 at 11:33 am


    It’s not uploaded, but I will do it, since I think its required now.


    Thanks for the link, but it doesn’t help. I put height: 100% on my footer, and min-height: 100% on HTML and body, but it just removes the space from the "advertise here" to the bottom of the footer.

    # March 27, 2010 at 11:39 am


    I know it loads like shit, and you dont understand the text, but you can see the code. It’s a free server, but in a few days, I’ll buy a good one. Hopefully it helps :)

    PS: It was my first site, so it’s not set up perfectly, but hopefully I could fix it without starting from the start again.

    # March 27, 2010 at 11:44 am

    Change height to 100% on #wrapper

    # March 27, 2010 at 11:48 am

    On the larger pages, it stops at the middle. So that wont work.

    # March 28, 2010 at 12:25 am

    These suggestions should work, but they probably are not because you have your footer div OUTSIDE of your #wrapper. The wrapper div should ALWAYS contain ALL content of the page, and then it should work. It is easy to lose track of your divs, especially when you have an excess of them (which you do). Therefore it is really helpful to label each div that you close with a comment. For example:

    <div id="wrapper">
    all page content here, including footer
    </div> <!– end #wrapper–>

    This way you can see which div is closed where and they are easier to keep track of. Hope this works for ya!

    # March 28, 2010 at 6:58 am

    Your problem is not a quick fix because of the way you have coded your site. You need to rework it.

    Div tags cannot be used within li tags, <br /> tags are not used for spacing, this should be done with margins and padding in the css. The center tag in the footer is deprecated and I think as Lynz said you have a problem with closing divs.

    # March 28, 2010 at 7:47 am

    I know it’s coded bad, as I said before it was my first site. I just hoped it could be fixed without totally remake, but I can see nobody have a solution. Thanks for your tries…

    EDIT: I found a way, that works "OK", but not perfectly. It continues longer than to the bottom, but it’s better than before.

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

You must be logged in to reply to this topic.