473,405 Members | 2,262 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,405 software developers and data experts.

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!

Jul 20 '05 #1
12 101933
On Wed, 12 May 2004 23:00:47 -0500, John Smith
<3r*********@sneakemail.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...
Jul 20 '05 #2
On Thu, 13 May 2004 00:37:56 -0400, Neal <ne*****@yahoo.com> wrote:

:On Wed, 12 May 2004 23:00:47 -0500, John Smith
:<3r*********@sneakemail.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....

Jul 20 '05 #3
On Wed, 12 May 2004 23:42:26 -0500, John Smith
<3r*********@sneakemail.com> wrote:
On Thu, 13 May 2004 00:37:56 -0400, Neal <ne*****@yahoo.com> wrote:

:On Wed, 12 May 2004 23:00:47 -0500, John Smith
:<3r*********@sneakemail.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.
Jul 20 '05 #4

"John Smith" <3r*********@sneakemail.com> wrote in message
news:si********************************@4ax.com...
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!


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>yada yada</division3>
<division4>qwerty</division4>
</division1>
<division2>blah blah</division2>


Jul 20 '05 #5
On Wed, 12 May 2004 23:38:47 -0500, Richard <An*******@127.001> wrote:

"John Smith" <3r*********@sneakemail.com> wrote in message
news:si********************************@4ax.com...
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!


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>yada yada</division3>
<division4>qwerty</division4>
</division1>
<division2>blah blah</division2>


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.
Jul 20 '05 #6
Neal wrote:
On Wed, 12 May 2004 23:00:47 -0500, John Smith
<3r*********@sneakemail.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...


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
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
Jul 20 '05 #7
On Thu, 13 May 2004 00:56:51 -0400, Neal <ne*****@yahoo.com> wrote:

:On Wed, 12 May 2004 23:42:26 -0500, John Smith
:<3r*********@sneakemail.com> wrote:
:
:> On Thu, 13 May 2004 00:37:56 -0400, Neal <ne*****@yahoo.com> wrote:
:>
:> :On Wed, 12 May 2004 23:00:47 -0500, John Smith
:> :<3r*********@sneakemail.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?

Jul 20 '05 #8
"Barry Pearson" <ne**@childsupportanalysis.co.uk> writes:
Neal wrote: I used the following extra CSS for one page. I used a conditional
comment in the head block so that only IE saw this.


Neal,

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

--
Haines Brown

Jul 20 '05 #9
Els
Haines Brown wrote:
"Barry Pearson" <ne**@childsupportanalysis.co.uk> writes:
Neal wrote:

I used the following extra CSS for one page. I used a conditional
comment in the head block so that only IE saw this.


Neal,

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


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

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #10
On Thu, 13 May 2004 17:28:46 GMT, Haines Brown
<br****@teufel.hartford-hwp.com> wrote:
"Barry Pearson" <ne**@childsupportanalysis.co.uk> writes:
Neal wrote:

I used the following extra CSS for one page. I used a conditional
comment in the head block so that only IE saw this.


Neal,

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


That was Barry. Watch the attributions.
Jul 20 '05 #11
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 ... ?

Jul 20 '05 #12
Els wrote:
Haines Brown wrote:
"Barry Pearson" <ne**@childsupportanalysis.co.uk> writes: [snip]
I used the following extra CSS for one page. I used a conditional
comment in the head block so that only IE saw this.


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


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


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.css 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.

http://www.barry.pearson.name/articl.../exhibit05.htm

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
Jul 20 '05 #13

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Jon Haakon | last post by:
Hi, I'm developing a websolution using ASP and DHTML technology that's running on a MS IIS webserver. My solution is frame based with a toolbar on top, a hidden frame for scripts in the...
1
by: Stan Brown | last post by:
On every page I have a <p ID="URhere"> that appears only when you print. (It's "display:none" in the general style sheet.) It would be nice if I could suggest that the browser print it at the...
2
by: Tristan Miller | last post by:
Greetings. I have a two-column web layout, where the first column is just the regular body text with a "marign-right" of 16em, and the second column is an "absolute"-positioned div with a width...
3
by: Jonah Bishop | last post by:
I have a strange problem that I'm hoping someone can help me with. I want a footer at the bottom of my simple HTML page to span the entire width of the page. I'm not using floats, columns or any...
1
by: Frances Del Rio | last post by:
don't know if I'll succeed, have spent a lot of time already trying to figure this out: I would like to position a footer (co. name, address, etc..) at the bottom of browser page, in such a way...
0
by: chris ciotti | last post by:
Hi - The following page: http://www.geocities.com/chris_ciotti/Holding/site-template-sliced.html was generated with Photoshop CS and uses CSS for positioning. The page validates...
0
by: chris ciotti | last post by:
Hi - Sorry for the crosspost. The following page: http://www.geocities.com/chris_ciotti/Holding/site-template-sliced.html was generated with Photoshop CS and uses CSS for positioning. The...
1
by: Edward | last post by:
I created a simple CSS layout (code and example below) for bloggin/writing but ran into five issues that I need help with: 1. How do I get rid of the right-margin red line on the last three...
4
by: john | last post by:
Hi to All, I am new to html authoring, so sorry if my terminology is not correct or exact. I would like to position a footer div to the bottom of the browser window. As I research in the web...
6
by: sooshi | last post by:
Hi all, The height of my page needs to be flexible as the page contains columns with lists which can vary in length. I also have a footer which needs to be stuck to the bottom. I managed to do...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.