Positioning a DIV at bottom of page

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • John Smith

    Positioning a DIV at bottom of page

    Is it possible to position a DIV so that it will always be at the
    bottom of the screen without having to use absolute positioning or
    using the background image workaround?


    Thank you!



  • Neal

    #2
    Re: Positioning a DIV at bottom of page

    On Wed, 12 May 2004 23:00:47 -0500, John Smith
    <3rtwemte001@sn eakemail.com> wrote:
    [color=blue]
    > Is it possible to position a DIV so that it will always be at the
    > bottom of the screen without having to use absolute positioning or
    > using the background image workaround?[/color]

    Kind of. Microsoft won't support it, but it exists. Write to Microsoft and
    ask them to fix IE6 to support position: fixed; - if enough people do it,
    they might...

    Comment

    • John Smith

      #3
      Re: Positioning a DIV at bottom of page

      On Thu, 13 May 2004 00:37:56 -0400, Neal <neal413@yahoo. com> wrote:

      :On Wed, 12 May 2004 23:00:47 -0500, John Smith
      :<3rtwemte001@s neakemail.com> wrote:
      :
      :> Is it possible to position a DIV so that it will always be at the
      :> bottom of the screen without having to use absolute positioning or
      :> using the background image workaround?
      :
      :Kind of. Microsoft won't support it, but it exists. Write to Microsoft and
      :ask them to fix IE6 to support position: fixed; - if enough people do it,
      :they might...


      How is this different that position: absolute? It looks like I would
      still have to set a top value....



      Comment

      • Neal

        #4
        Re: Positioning a DIV at bottom of page

        On Wed, 12 May 2004 23:42:26 -0500, John Smith
        <3rtwemte001@sn eakemail.com> wrote:
        [color=blue]
        > On Thu, 13 May 2004 00:37:56 -0400, Neal <neal413@yahoo. com> wrote:
        >
        > :On Wed, 12 May 2004 23:00:47 -0500, John Smith
        > :<3rtwemte001@s neakemail.com> wrote:
        > :
        > :> Is it possible to position a DIV so that it will always be at the
        > :> bottom of the screen without having to use absolute positioning or
        > :> using the background image workaround?
        > :
        > :Kind of. Microsoft won't support it, but it exists. Write to Microsoft
        > and
        > :ask them to fix IE6 to support position: fixed; - if enough people do
        > it,
        > :they might...
        >
        >
        > How is this different that position: absolute? It looks like I would
        > still have to set a top value....[/color]

        Nope. position: absolute; bottom: 0; should put the element at the bottom
        of the page, whether above the fold or below, and it scrolls with the
        page. Fixed won't scroll, it stays put, and using bottom: 0; it serves as
        a "footer" at the bottom of the viewport.

        Comment

        • Richard

          #5
          Re: Positioning a DIV at bottom of page


          "John Smith" <3rtwemte001@sn eakemail.com> wrote in message
          news:sis5a0pttp at1tgsjmitejj9d atkkr4j76@4ax.c om...[color=blue]
          > Is it possible to position a DIV so that it will always be at the
          > bottom of the screen without having to use absolute positioning or
          > using the background image workaround?
          >
          >
          > Thank you!
          >
          >[/color]

          Set division1 to a fixed height larger than you'll ever need.
          Set division2 directly below it.
          do all of your layout work in division 1.

          <division1>
          <division3>ya da yada</division3>
          <division4>qwer ty</division4>
          </division1>
          <division2>bl ah blah</division2>




          Comment

          • Neal

            #6
            Re: Positioning a DIV at bottom of page

            On Wed, 12 May 2004 23:38:47 -0500, Richard <Anonymous@127. 001> wrote:
            [color=blue]
            >
            > "John Smith" <3rtwemte001@sn eakemail.com> wrote in message
            > news:sis5a0pttp at1tgsjmitejj9d atkkr4j76@4ax.c om...[color=green]
            >> Is it possible to position a DIV so that it will always be at the
            >> bottom of the screen without having to use absolute positioning or
            >> using the background image workaround?
            >>
            >>
            >> Thank you!
            >>
            >>[/color]
            >
            > Set division1 to a fixed height larger than you'll ever need.
            > Set division2 directly below it.
            > do all of your layout work in division 1.
            >
            > <division1>
            > <division3>ya da yada</division3>
            > <division4>qwer ty</division4>
            > </division1>
            > <division2>bl ah blah</division2>[/color]

            How will that put it at the bottom of the screen? It might very well not
            reach the bottom of the screen, or be lower so I have to scroll to get to
            it.

            Comment

            • Barry Pearson

              #7
              Re: Positioning a DIV at bottom of page

              Neal wrote:[color=blue]
              > On Wed, 12 May 2004 23:00:47 -0500, John Smith
              > <3rtwemte001@sn eakemail.com> wrote:
              >[color=green]
              >> Is it possible to position a DIV so that it will always be at the
              >> bottom of the screen without having to use absolute positioning or
              >> using the background image workaround?[/color]
              >
              > Kind of. Microsoft won't support it, but it exists. Write to
              > Microsoft and ask them to fix IE6 to support position: fixed; - if
              > enough people do it, they might...[/color]

              True. But there are some work-arounds, for IE's lack of support for {
              position: fixed }. There are separate work-arounds for IE 5 & IE 6. I think I
              read about them here.

              I used the following extra CSS for one page. I used a conditional comment in
              the head block so that only IE saw this. It overrode the "fixed" value of one
              of the rules seen by other browsers. It only works for certain of the
              elements, I think. (And is *not* a substitute for IE doing things right!)

              html {
              overflow: hidden;
              }
              body {
              height: 100%;
              overflow: auto;
              }
              ..someclass {
              position: absolute;
              }

              --
              Barry Pearson


              This site provides information & analysis of child support & the Child Support Agency in the UK, mainly for lobbyists, politicians, academics & media.



              Comment

              • John Smith

                #8
                Re: Positioning a DIV at bottom of page

                On Thu, 13 May 2004 00:56:51 -0400, Neal <neal413@yahoo. com> wrote:

                :On Wed, 12 May 2004 23:42:26 -0500, John Smith
                :<3rtwemte001@s neakemail.com> wrote:
                :
                :> On Thu, 13 May 2004 00:37:56 -0400, Neal <neal413@yahoo. com> wrote:
                :>
                :> :On Wed, 12 May 2004 23:00:47 -0500, John Smith
                :> :<3rtwemte001@s neakemail.com> wrote:
                :> :
                :> :> Is it possible to position a DIV so that it will always be at the
                :> :> bottom of the screen without having to use absolute positioning or
                :> :> using the background image workaround?
                :> :
                :> :Kind of. Microsoft won't support it, but it exists. Write to Microsoft
                :> and
                :> :ask them to fix IE6 to support position: fixed; - if enough people do
                :> it,
                :> :they might...
                :>
                :>
                :> How is this different that position: absolute? It looks like I would
                :> still have to set a top value....
                :
                :Nope. position: absolute; bottom: 0; should put the element at the bottom
                :of the page, whether above the fold or below, and it scrolls with the
                :page. Fixed won't scroll, it stays put, and using bottom: 0; it serves as
                :a "footer" at the bottom of the viewport.

                This works great expect when the page scrolls. Is there a workaround
                for that?



                Comment

                • Haines Brown

                  #9
                  Re: Positioning a DIV at bottom of page

                  "Barry Pearson" <news@childsupp ortanalysis.co. uk> writes:
                  [color=blue]
                  > Neal wrote:[/color]
                  [color=blue]
                  > I used the following extra CSS for one page. I used a conditional
                  > comment in the head block so that only IE saw this.[/color]

                  Neal,

                  I understand your general point, but wondered about "conditiona l
                  comment." Don't EI and Mozilla respond to a comment in the header
                  style the same way?

                  --
                  Haines Brown

                  Comment

                  • Els

                    #10
                    Re: Positioning a DIV at bottom of page

                    Haines Brown wrote:
                    [color=blue]
                    > "Barry Pearson" <news@childsupp ortanalysis.co. uk> writes:
                    >[color=green]
                    >>Neal wrote:[/color]
                    >[color=green]
                    >>I used the following extra CSS for one page. I used a conditional
                    >>comment in the head block so that only IE saw this.[/color]
                    >
                    > Neal,
                    >
                    > I understand your general point, but wondered about "conditiona l
                    > comment." Don't EI and Mozilla respond to a comment in the header
                    > style the same way?[/color]

                    It's Barry who mentioned the conditional comment, not Neal ;-)

                    --
                    Els
                    Blog and other pages, mostly outdated.

                    Sonhos vem. Sonhos vão. O resto é imperfeito.
                    - Renato Russo -

                    Comment

                    • Neal

                      #11
                      Re: Positioning a DIV at bottom of page

                      On Thu, 13 May 2004 17:28:46 GMT, Haines Brown
                      <brownh@teufel. hartford-hwp.com> wrote:
                      [color=blue]
                      > "Barry Pearson" <news@childsupp ortanalysis.co. uk> writes:
                      >[color=green]
                      >> Neal wrote:[/color]
                      >[color=green]
                      >> I used the following extra CSS for one page. I used a conditional
                      >> comment in the head block so that only IE saw this.[/color]
                      >
                      > Neal,
                      >
                      > I understand your general point, but wondered about "conditiona l
                      > comment." Don't EI and Mozilla respond to a comment in the header
                      > style the same way?
                      >[/color]

                      That was Barry. Watch the attributions.

                      Comment

                      • John Smith

                        #12
                        Re: Positioning a DIV at bottom of page

                        Thank you everyone for your responses. I have achieved my goal. You
                        can take a look at the results at http://rhpt.com/default.view. I ask
                        that if you do go to the URL, please use Netscape/Mozilla/Firefox and
                        let me know if the bottom footer doesn't stay at the bottom.

                        Now, does anyone know how to make a DIV stretch the length of the page
                        in Gecko based browsers without resorting to the "repeat background
                        image" trick ... ?



                        Comment

                        • Barry Pearson

                          #13
                          Re: Positioning a DIV at bottom of page

                          Els wrote:[color=blue]
                          > Haines Brown wrote:[color=green]
                          >> "Barry Pearson" <news@childsupp ortanalysis.co. uk> writes:[/color][/color]
                          [snip][color=blue][color=green][color=darkred]
                          >>>I used the following extra CSS for one page. I used a conditional
                          >>>comment in the head block so that only IE saw this.[/color]
                          >>
                          >> Neal,
                          >> I understand your general point, but wondered about "conditiona l
                          >> comment." Don't EI and Mozilla respond to a comment in the header
                          >> style the same way?[/color]
                          >
                          > It's Barry who mentioned the conditional comment, not Neal ;-)[/color]

                          I've lost track of who is asking what of whom!

                          There are ways to put conditional comments in the head-block so that (as far
                          as I know) only IE will take action. All other browsers will treat them as the
                          comments they are. I've seen references to the material on the MS site, but I
                          can't find the reference at the moment.

                          Example, from a head-block:

                          <!--[if IE]>
                          <link href="exhibit05 _ie.css" rel="stylesheet " type="text/css">
                          <![endif]-->

                          This will cause IE, and no other browser, to use exhibit05_ie.cs s in the
                          cascade. See, for example, the following page. In non-IE browsers it takes the
                          cells of a table and uses { position: fixed } to stick them to the corners &
                          sides of the viewport. But IE doesn't support { position: fixed }, so a
                          work-around it needed. This page uses a tricky combination of html & body
                          rules & { position: absolute }. And then, even in IE, it can stick the cells
                          of a table to the corners & sides of the viewport.



                          --
                          Barry Pearson


                          This site provides information & analysis of child support & the Child Support Agency in the UK, mainly for lobbyists, politicians, academics & media.



                          Comment

                          Working...