SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    100% high layout

    I have a layout that needs to occupy the whole displayed height, but i have no idea how to do that. The footer should ALWAYS be at the bottom, and the layout should stretch down even if there's no enough contents.

    I'm currently using this markup for my layout (simplified version):
    Code:
    <div id="container">
       <div id="header"></div>
       <div id="sidebar"></div>
       <div id="main"></div>
       <div id="footer"></div>
    </div>
    The container is centered, the header occupies the whole width of the continare, the sidebar and the "main" are both floated to the left, and the footer clears floats on both sides.

    How can this be accomplished?

  2. #2
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi mperor

    I can't answer your question accurately but I can tell you how I managed it.

    I copied Paul O'B's template, then changed it to suit.

    Pauls 2 column layout

    If you want to understand it for yourself you should continue to wrestle with it.

    Good luck.
    fisherboy
    Web Site Design

  3. #3
    SitePoint Enthusiast syedasif's Avatar
    Join Date
    Jun 2006
    Location
    Chicago, IL
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd say you gotta check out the Layout Reservoir and Glish.

  4. #4
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fisherboy
    Hi mperor

    I can't answer your question accurately but I can tell you how I managed it.

    I copied Paul O'B's template, then changed it to suit.

    Pauls 2 column layout

    If you want to understand it for yourself you should continue to wrestle with it.

    Good luck.
    How was is accomplished? i couldn't understand it by reading the code only. Will anyone please explain the concept behind that layout?

  5. #5
    Codehead. hamidof's Avatar
    Join Date
    Dec 2005
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a look at link below!

  6. #6
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mPeror
    How was is accomplished? i couldn't understand it by reading the code only. Will anyone please explain the concept behind that layout?
    Like I said, I don't completely understand what Paul has done. Essentially he has hacked the CSS to get past IE's habit of ignoring the min-height property. This means your footer remains at the bottom of the page even if there is not enough content.

    I like hamidof's solution as well, however it makes the footer visible 100% of the time and I'm not sure if that is what you're aiming at?

    I know there have been threads where Paul explains his work. Perhaps if you have a look at some of his threads or use the search function you will find them.

    Cheers
    fisherboy
    Web Site Design

  7. #7
    Codehead. hamidof's Avatar
    Join Date
    Dec 2005
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like hamidof's solution as well, however it makes the footer visible 100% of the time and I'm not sure if that is what you're aiming at?
    This is a good thing, because if you for example design with 1280x800 screen resolution and a user with 1024x768 screen resolution views your page, then he doesn't have to scroll the whole thing down to see everything.

    Good Luck!
    -H
    Last edited by hamidof; Jun 18, 2006 at 03:21.

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hamidof
    This is a good thing
    I think that's debatable (ie will be based on personal preference). In your example you end up with less screen real estate because there's a certain amount of space permanently occupied by top and bottom nav elements. You also end up with internal scrollbars which are not to everyone's taste.

  9. #9
    Codehead. hamidof's Avatar
    Join Date
    Dec 2005
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    will be based on personal preference
    Of course thats true!

  10. #10
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mPeror
    How was is accomplished? i couldn't understand it by reading the code only. Will anyone please explain the concept behind that layout?
    Hello

    A single column with one float in it
    The single column has a margin left as wide as the float
    The float is drawn in place by a negative left margin, (as wide) as the float
    The negative bottom margin of the single column makes room for the footer
    The header is a position absolute
    A push box moves the content of the single column beneath the header

  11. #11
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah, i found out what was wrong. I didn't set my <body> and <html> to be 100% hiegh

    I'll look up the other solutions to see how you guys approached this though, thanks guys.

  12. #12
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hamidof
    Take a look at link below!
    That link is debatable.
    It uses javascript and isn't pure css (if you dont mind using that.)
    Just makes the code look sloppy unless you use SSI or phpInclude.

    It also has a problem with 100% width, but that may be due to the
    borders

  13. #13
    Codehead. hamidof's Avatar
    Join Date
    Dec 2005
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It uses javascript and isn't pure css (if you dont mind using that.)
    My point is not showing off a some CSS, it's the problem of 100% height page and the solutions out there didn't work in all the browsers even though the coders said they work, anyway I just wanted to show how to do it with JavaScript, I may need to explain it on my forum a little more too.


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
  •