Tables VS. CSS (Footer at the bottom, 100% of the viewport)

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Tyler Carver
    #1

    Tables VS. CSS (Footer at the bottom, 100% of the viewport)

    I've tried to get CSS to give me a basic layout where I can place a
    footer at the bottom of the page and the top of the page I can use for
    content. I don't however want the footer to pull away from the bottom
    of the viewport if the top content is small. Also, when I resize the
    window I want the footer to move with the bottom of the page until I
    reach the content.

    Here is an example that works both in IE and Mozilla using tables. I
    aslo had to use quirks mode for IE. I want to get rid of quirks mode
    and use div's. Personally I don't think it can be done.

    code:

    <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
    <html>
    <head>
    <style type="text/css">
    body{margin:0px ;padding:0px;}
    table{border-collapse:collap se;height:100%}
    td{padding:0px}
    #top{ background-color:red;verti cal-align:top}
    #bottom{height: 100px;
    background-color:yellow;ve rtical-align:top}
    </style>
    </head>
    <body>
    <table>
    <tr id="top">
    <td>
    <h1>header</h1>Takes up the viewport minus the footer
    </td>
    </tr>
    <tr id="bottom">
    <td>
    <h1>footer</h1>Located at the bottom
    </td>
    </tr>
    </table>
    </body>
    </html>
    Tags: None
    • Danny@Kendal
      #2
      Re: Tables VS. CSS (Footer at the bottom, 100% of the viewport)

      "Tyler Carver" <xfreshy222-2@yahoo.com> wrote in message
      news:813bb307.0 409010742.7e42c 25e@posting.goo gle.com...[color=blue]
      > I've tried to get CSS to give me a basic layout where I can place a
      > footer at the bottom of the page and the top of the page I can use for
      > content. I don't however want the footer to pull away from the bottom
      > of the viewport if the top content is small. Also, when I resize the
      > window I want the footer to move with the bottom of the page until I
      > reach the content.[/color]

      The following roughly thrown together page works for IE6 but isn't quite
      right for Opera7.54 or Netscape7.1
      Opera needs the page refreshing after it loads or the window is resized
      and Netscape brings up a vertical scroll bar.

      I'm not sure why it doesn't work properly, being new-ish to CSS myself, so
      will watch for any replies with interest.

      =============== ==

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">

      <html>
      <head>
      <meta http-equiv="Content-Language" content="en-gb">
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
      <title>Test Page</title>
      </head>

      <body>

      <div style="width:10 0%; position:absolu te; bottom:0; text-align:center">T HIS
      IS THE BOTTOM!</div>

      </body>
      </html>


        Comment

        • Eric B. Bednarz
          #3
          Re: Tables VS. CSS (Footer at the bottom, 100% of the viewport)

          xfreshy222-2@yahoo.com (Tyler Carver) writes:
          [color=blue]
          > I've tried to get CSS to give me a basic layout where I can place a
          > footer at the bottom of the page and the top of the page I can use for
          > content. I don't however want the footer to pull away from the bottom
          > of the viewport if the top content is small.[/color]

          Have multiple advice with decreasing value:

          1) Stop wanting that
          2) Keep using a table
          3) <http://sandbox.bednarz .nl/css/height/footer.html>
          [color=blue]
          > <!doctype html public "-//w3c//dtd html 4.0 transitional//en">[/color]
          \
          The FPI is case sensitive
          [color=blue]
          > table{border-collapse:collap se;height:100%}[/color]
          [color=blue]
          > #bottom{height: 100px;
          > background-color:yellow;ve rtical-align:top}[/color]

          You're better off declaring basically

          body
          {
          margin: 0;
          padding: 0;
          }
          html,
          body,
          table
          {
          height: 100%;
          }
          #bottom
          {
          vertical-align: bottom;
          }

          and then finetune the appearance of the box that is stuck in #bottom.


          --

          Più Cabernet,
          meno Internet.

            Comment

            • Tyler Carver
              #4
              Re: Tables VS. CSS (Footer at the bottom, 100% of the viewport)

              Eric B. Bednarz <bednarz@fahr-zur-hoelle.org> wrote in message news:<m3ekllaee 1.fsf@email.bed narz.nl>...[color=blue]
              >
              > Have multiple advice with decreasing value:
              >
              > 1) Stop wanting that[/color]

              I've had this response a number of times. Which is why I think css is
              inadequate and has a long way to go. Many reasonable and simple
              things are next to impossible (especially with layout).
              [color=blue]
              > 2) Keep using a table[/color]

              It seemed I had no other option. It was solved in two seconds with a
              table but I had to leave IE in quirks mode (which I hate).

              [color=blue]
              > 3) <http://sandbox.bednarz .nl/css/height/footer.html>[/color]

              This page didn't load.


              [color=blue]
              >[color=green]
              > > <!doctype html public "-//w3c//dtd html 4.0 transitional//en">[/color]
              > \
              > The FPI is case sensitive[/color]

              Thanks for the tip. Stupid Visual Studio .Net formatting (which you
              can't completely turn off).

                Comment

                • Spartanicus
                  #5
                  Re: Tables VS. CSS (Footer at the bottom, 100% of the viewport)

                  xfreshy222-2@yahoo.com (Tyler Carver) wrote:
                  [color=blue][color=green]
                  >> 1) Stop wanting that[/color]
                  >
                  >I've had this response a number of times. Which is why I think css is
                  >inadequate and has a long way to go.[/color]

                  Does it? A footer should be positioned relative to the content,
                  positioning it relative to the viewport makes no sense on the web where
                  you have no idea of or control over the viewport height.
                  [color=blue]
                  >Many reasonable and simple
                  >things are next to impossible (especially with layout).[/color]

                  Most problems are not the result of lack css inadequacies, but because
                  css support in IE is relatively poor.

                  --
                  Spartanicus

                    Comment

                    • Neal
                      #6
                      Re: Tables VS. CSS (Footer at the bottom, 100% of the viewport)

                      On 2 Sep 2004 09:21:48 -0700, Tyler Carver <xfreshy222-2@yahoo.com> wrote:
                      [color=blue]
                      > Eric B. Bednarz <bednarz@fahr-zur-hoelle.org> wrote in message
                      > news:<m3ekllaee 1.fsf@email.bed narz.nl>...[color=green]
                      >>
                      >> Have multiple advice with decreasing value:
                      >>
                      >> 1) Stop wanting that[/color]
                      >
                      > I've had this response a number of times. Which is why I think css is
                      > inadequate and has a long way to go. Many reasonable and simple
                      > things are next to impossible (especially with layout).[/color]

                      Depends on how you define "reasonable ". By putting an element as low as
                      possible - with variable space between it and the preceding content - you
                      are essentially asking the browser to tack it onto the bottom chrome or
                      lower. That's not a content-driven design.

                      Regardless of how attractive it is, that's not how CSS was designed.
                      Ultimately, what is lost if the footer bar is not flush to the bottom
                      chrome? Other than a perceived notion that there's wasted space below
                      (which is not really wasted, just extra)? You still have a very usable
                      page.

                      Remember, CSS thinks of the height of the page based on the content, not
                      on the viewport. Which makes all sorts of sense if you really think about
                      it.

                        Comment

                        Previous template Next
                        Working...