CSS Layout Problem

Discussion in 'HTML' started by wal, Dec 11, 2007.

  1. wal

    wal Guest

    Hi all,

    I'm trying to create a normal layout. From top to bottom; the header,
    the content then the footer (both the header and footer are fixed-
    height - in pixels). What's different about this layout is that the
    contents column will be fixed width (also centered) and has a solid
    background color. So far so good, no problem, now the problem is that
    I want the footer to be sticky (sticky, not fixed position), ie. if
    the contents is shorter than the height of the browser window, the
    footer will be pushed to the bottom of the browser window but if the
    contents is longer it will be displayed normally under the contents
    and will only be shown when scrolling to the bottom of the page.

    Please see http://www.waleedeissa.com/temp/example.gif to understand
    more what I'm trying to do.

    How can this be achieved using css, I've been trying for hours but no
    use. It's quite easy to achieve without the header but how can it be
    done with the header?

    For example, this how I would do it without the header:
    <html>
    <head>
    <style type="text/css">
    html, body
    {
    margin: 0px;
    padding: 0px;
    height: 100%;
    }
    #container
    {
    height: 100%;
    margin-bottom: -100px;
    }
    #content
    {
    height: 100%;
    width: 760px;
    margin: 0px auto;
    }
    footer
    {
    height: 100px;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="content"><div>
    <div>
    <div id="footer"><div>
    </body>
    </html>


    Any help would be very much appreciated...
     
    wal, Dec 11, 2007
    #1
    1. Advertising

  2. wal

    Ben C Guest

    On 2007-12-11, wal <> wrote:
    > Hi all,
    >
    > I'm trying to create a normal layout. From top to bottom; the header,
    > the content then the footer (both the header and footer are fixed-
    > height - in pixels). What's different about this layout is that the
    > contents column will be fixed width (also centered) and has a solid
    > background color. So far so good, no problem, now the problem is that
    > I want the footer to be sticky (sticky, not fixed position), ie. if
    > the contents is shorter than the height of the browser window, the
    > footer will be pushed to the bottom of the browser window but if the
    > contents is longer it will be displayed normally under the contents
    > and will only be shown when scrolling to the bottom of the page.


    You need min-height for that, but I don't think it works in IE.

    [...]
    > For example, this how I would do it without the header:
    ><html>

    [...]
    ></html>


    Apart from the mistakes, I don't think that gives you the effect you
    want-- the footer is always going to be at the bottom of the viewport,
    even if the content is longer than the viewport.

    You need min-height: 100% on #container, not height: 100%.
     
    Ben C, Dec 11, 2007
    #2
    1. Advertising

  3. wal

    wal Guest

    hi ben, thanks for your reply, actually you're right, i was a little
    lazy that i wrote the code without bothering checking it on a web
    browser (probably because that wasn't the main point, i was just
    trying to give an indication how it can be done without a header).
    Here's the code for the sticky footer http://ryanfait.com/sticky-footer/,
    I tested it before and it worked perfectly, what i was trying to do is
    add a fixed header to the formula but hasn't been successful so far ..
    I'm thinking about solving the problem using javascript but i really
    prefer a css solution, that would be much cleaner...
     
    wal, Dec 12, 2007
    #3
  4. wal

    wal Guest

    wal, Dec 12, 2007
    #4
  5. wal

    wal Guest

    hi again, well, i checked your links, i really appreciate your help
    but unfortunately this is not what i'm trying to do .. this is what i
    meant when i said that the header and footer are fixed height not
    fixed in position .. to make it as clear as possible what exactly i'm
    trying to achieve is that I want to create a very normal page layout
    (scrollable with no fixed parts) the only difference i want to have is
    that when the contents section is shorter than the viewport (ie. the
    brower window height), i want the contents section to stretch till the
    bottom .. i hope it's clearer now... thanks again
     
    wal, Dec 12, 2007
    #5
  6. wal

    wal Guest

    oops, sorry, i replied to the wrong person...
     
    wal, Dec 12, 2007
    #6
  7. Jonathan N. Little, Dec 12, 2007
    #7
  8. wal

    Ben C Guest

    On 2007-12-12, wal <> wrote:
    > hi ben, thanks for your reply, actually you're right, i was a little
    > lazy that i wrote the code without bothering checking it on a web
    > browser (probably because that wasn't the main point, i was just
    > trying to give an indication how it can be done without a header).
    > Here's the code for the sticky footer http://ryanfait.com/sticky-footer/,


    It seems to be using min-height: 100% with height: auto, with what I'm
    guessing is a hack to make IE give you height: 100%.

    > I tested it before and it worked perfectly, what i was trying to do is
    > add a fixed header to the formula but hasn't been successful so far ..
    > I'm thinking about solving the problem using javascript but i really
    > prefer a css solution, that would be much cleaner...


    Just put the header inside .wrapper, i.e.

    <div class="wrapper">
    <div class="header">
    ...
    </div>

    ...

    and set .header { height: 4em; }

    Or by "fixed" do you mean you want the header not to scroll with the
    contents?

    In that case use

    ..header
    {
    position: fixed;
    width: 100%;
    height: 4em;
    top: 0;
    }

    and add another <div class="push"></div> after it-- since it won't take
    up any space if it's position: fixed.
     
    Ben C, Dec 12, 2007
    #8
  9. wal

    wal Guest

    hi again ben,

    thanks a lof for your reply, well i'm afraid this is still not exactly
    what i want .. i might have not explained clearly but let's explain
    this in another way, so, first of all forget what i said in all my
    previous messages and also ignore IE, we only what this to work on
    FireFox.. let's say that we have a page with only one div (760px in
    width with a solid color background and centered horizontally),
    actually this is very easy, see the code below:

    <html>
    <head>
    <style type="text/css">
    html, body
    {
    height: 100%;
    background-color: white;
    }
    #contents
    {
    min-height: 100%;
    width: 760px;
    margin:0px auto;
    background-color: red;
    }
    </style>
    </head>
    <body>
    <div id="contents">Contents go here...</div>
    </body>
    </html>

    The code above will make the div (#contents) stretch to fill the
    height of the viewport, correct? Now, what I want exactly is to leave
    some vertical space above, let's say 100px and some vertical space
    below, let's say 50px (not for a header or a footer, we don't have a
    header or footer in this case), so the div should always stretch to
    fill the height of the viewport but leaves a margin above and below
    (so that that margin is not covered by the background color of the
    div).

    To even explain further; I'm creating a page with a two background
    images, one is repeated horizontally at the top of the page and the
    other one repeated horizontally at the bottom of the page, both
    background images exceed the margins (or the vertical space) left by
    the contents div as explained above. ie. the top background image
    covers the top margin of the div and exceeds it, the same for the
    bottom image, to make things a little clearer please see that image so
    that you understand what i'm trying to do:

    http://www.waleedeissa.com/temp/example2.gif

    sorry for the long explanation, i know it's a little bit complicated
    to explain but i hope it's clear now...
     
    wal, Dec 13, 2007
    #9
  10. wal

    Ben C Guest

    On 2007-12-13, wal <> wrote:
    > hi again ben,
    >
    > thanks a lof for your reply, well i'm afraid this is still not exactly
    > what i want .. i might have not explained clearly but let's explain
    > this in another way, so, first of all forget what i said in all my
    > previous messages and also ignore IE, we only what this to work on
    > FireFox..


    Good, I might be able to help then.

    > let's say that we have a page with only one div (760px in
    > width with a solid color background and centered horizontally),
    > actually this is very easy, see the code below:
    >
    ><html>
    ><head>
    ><style type="text/css">
    > html, body
    > {
    > height: 100%;
    > background-color: white;
    > }
    > #contents
    > {
    > min-height: 100%;
    > width: 760px;
    > margin:0px auto;
    > background-color: red;
    > }
    ></style>
    ></head>
    ><body>
    ><div id="contents">Contents go here...</div>
    ></body>
    ></html>
    >
    > The code above will make the div (#contents) stretch to fill the
    > height of the viewport, correct?


    Yes, it should be at least the height of the viewport.

    > Now, what I want exactly is to leave
    > some vertical space above, let's say 100px and some vertical space
    > below, let's say 50px (not for a header or a footer, we don't have a
    > header or footer in this case), so the div should always stretch to
    > fill the height of the viewport but leaves a margin above and below
    > (so that that margin is not covered by the background color of the
    > div).

    [...]
    > http://www.waleedeissa.com/temp/example2.gif
    >
    > sorry for the long explanation, i know it's a little bit complicated
    > to explain but i hope it's clear now...


    I think I get it now. This is quite tricky. The problem is that
    min-height: 100% is the minimum height of the content area, so it's
    difficult to leave gaps at the top and bottom and make the whole lot
    take up 100%.

    Absolutely positioned boxes are the only things I can think of that can
    be located fixed distances from the top and bottom edges of auto-height
    containers.

    So here's one way to do it, which involves sneaking the background in
    behind the contents with z-index.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style type="text/css">
    html, body
    {
    height: 100%;
    background-color: white;
    margin: 0; padding: 0;
    }
    #contents
    {
    min-height: 100%;
    width: 760px;
    margin: 0px auto;
    position: relative;
    z-index: 0;
    }
    #background
    {
    position: absolute;
    top: 100px;
    bottom: 50px;
    left: 0;
    right: 0;
    background-color: red;
    z-index: -1;
    }
    </style>
    </head>
    <body>
    <div id="contents">
    <div id="background"></div>
    <div style="height: 100px"></div>
    Contents go here...
    <div style="height: 50px"></div>
    </div>
    </body>
    </html>
     
    Ben C, Dec 13, 2007
    #10
  11. wal

    wal Guest

    well, you really seem to be a master with css, i didn't really work
    much with relative and absolute positions, your solution worked
    perfectly when i first tried it but unfortunately when i changed
    "height: 100%;" (for html and body) to "min-height: 100%;" (that was a
    mistake in my code sorry for that), the background now only covers the
    contents and doesn't stretch to the bottom.

    actually i thought of something, i think i'm going to use a background
    image hack for this .. actually in my image i was just trying to
    explain what i'm trying to do .. the real design is quite similar (not
    exact colors of course) but the red part is really white not red, in
    other words the content area has a transparent background, so i
    decided to add the content area background part to the background
    images .. see the images below to understand what i mean:

    http://www.waleedeissa.com/temp/example3.gif
    http://www.waleedeissa.com/temp/topbg.gif
    http://www.waleedeissa.com/temp/bottombg.gif

    thanks a lot for everything, i find this css thing very limiting
    sometimes, they should've thought about all this problems before
    asking us to drop tables and start using css for the layout! also, i
    could think that the box model was probably implemented correctly in
    ie5 not what we have in the standards!
     
    wal, Dec 14, 2007
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    734
    clintonG
    Dec 24, 2004
  2. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    1,014
  3. Replies:
    1
    Views:
    585
    John Timney \(MVP\)
    Jun 19, 2006
  4. Habib

    Css-Layout vs Table-Layout

    Habib, Jun 19, 2006, in forum: HTML
    Replies:
    15
    Views:
    1,018
    Wÿrm
    Jun 20, 2006
  5. Replies:
    29
    Views:
    883
    Ben C
    Mar 21, 2008
Loading...

Share This Page