Grow your CSS skills. Land your dream job.

Desperately need layout help

  • # June 17, 2009 at 12:40 pm

    Hey guys…
    I’m really new to this CSS thing… in fact, I’m not really a web designer, but a photographer too poor to pay someone to make me a website… and I could really use your help in getting my layout correct.

    If you go to my website, testing.justinconly.com (user: testing pass: testing) you can see my dilema.
    I’m trying to get my ENTIRE site (header, content, and footer) to fill the browser window height wise to 100%, while always keeping the footer in view.

    I’ve encountered a few teqniques for keeping the footer in view… and assumed that all I needed to do was to set the content area to 100%. Although you guys have helped me accomplish this, I’ve realized that in doing so, my content area takes 100% of the browser window, not its available space.

    I can’t tell you how much I’d appreciate your help in accomplishing my goal.. allowing the content area to fill whatever "available" space it has, between the header and footer.

    Again, if you guys wouldn’t mind taking a look at my CSS, and helping my re-layout my site, I can’t tell you just how much I’d appreciate it..

    Thank you all so much in advance.

    # June 17, 2009 at 2:51 pm

    i think what you are looking for is the "sticky footer" technique:

    http://matthewjamestaylor.com/blog/keep … f-the-page

    basically you make your main content div have a bottom negative margin, and then make your footer div the same height. there is a bit more to it than that, but that is the gist of it

    # June 18, 2009 at 10:21 am

    Well, yes, that’s part of it…
    But the issue is, my headed needs to be set to a defined height as well, and by doing so, I don’t know of a way to make the content area fill the rest of the screen. When it’s set to 100%, it includes the size of both the footer and the header.

    # June 18, 2009 at 11:04 am

    Couple things:

    1) The phone number and email in the bottom left is completely unreadable to me, it’s tiny.

    2) Try putting 100% height onto your #page div and working from there, I don’t have quite enough time to debug it all myself at the moment.

    I really like your photos, they look great.

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

You must be logged in to reply to this topic.

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