HTML layout - css styled - footer

graham howe · graham howe

Hi, Ive made up a HTML layout which im styling with CSS. A footer table which
i'd like to align to sit at the browser bottom won't.

I have tried and it worked, position: absolute; bottom: 0px;. This seemed to
work in 1.5 mozilla, and IE 6. Ive not tested it in earlier versions but i know
it won't work out.

Is their a better work around? If so id be very grateful for the help...

thanks for your time...

Saini4u · Saini4u

Hi,
use relative positining instead of absolute. It is always a headace with absolute in footer. atlast, its not css, its all about browsers behaving differently!!!

Murray *ACE* · Murray *ACE*

Actually it IS CSS, and when you use it without really understanding what it
is you are using.

This may help you understand positioning a bit -

There are 4 different types of positioning:
Absolute
Relative
Fixed
Static

Here is a brief explanation of each kind of positioning (with regard to
placement of elements on the page only)....

Position:absolute (or A/P elements)
-----------------------
This does several things -
1. It 'removes' the element from the flow of the code on the* page so that
it can no longer influence the size or position of any other pa*ge element
(except for those contained within it, of course).

2. The absolutely positioned element takes its position from the position of
its closest PA*RENT *positioned* element - in the absence of any explicitly
positioned parent, this will default to the <body> tag, which is always
positioned
*at 0,0 in the browser viewport.

This means that it doesn't matter where in the HTML code the laye*r's code
appears (between <body> and </body>), its location on the screen will not
change (this assumes that you have not positioned the A/P element within
a table or another A/P element, of course). Furthe*rmore, the space in
which
this element would have appeared were it not positi*oned is not preserved
on the screen. In other words, absolutely positioned elements don't take
up any space on the page. In fact, they FLOAT over the page.

Position:relative (or R/P elements)
----------------------
In contrast to absolute positioning, a relatively positioned page element is
*not* removed from t*he flow of the code on the page, so it will use the
spot
where it would have* appeared based on its position in the code as its
zero point reference. If* you then supply top, right, bottom, or left
positions
to the style for this *element, those values will be used as offsets from
its
zero point.

This means that it DOES matter where in the code the relativ*ely positioned
element appears (, as it will be positioned in that location (*factoring in
the offsets) on the screen (this is true for any placement in the code).
Furthermore, the space where this e*lement would have appeared is
preserved in the display, and can therefore* affect the placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.

Position:static
-------------------
As with relative position, static positions also "go with *the flow". An
element with a static position cannot have values for offset*s (top, right,
left, bottom) or if it has them, they will be ignored. Unless explicitly
positioned, all div elements default to static positioning.

Position:fixed
------------------
A page element with this style will not scroll as the page c*ontent scrolls.
Support for this in elements other than page backgrounds is *quirky

There are several other things you need to know:

1. ANY page element can be positioned - paragraphs, tables, images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that if it is not
positioned or explicitly styled otherwise, a) it will always begin on a new
line on the screen, and b) it will always force content to a new line below
it, and c) it will always take up the entire width of its container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of other
elements
on the page. For example, a 'layer' placed over a hyperlink will mask that
hyperlink.

You can see a good example of the essential difference between absolute and
relative positioning here -

[url]http://www.great-web-sights.com/g_layersdemo.asp[/url]

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"Saini4u" <webforumsuser@macromedia.com> wrote in message
news:e1mhu6$6co$1@forums.macromedia.com...

> Hi,
> use relative positining instead of absolute. It is always a headace with
> absolute in footer. atlast, its not css, its all about browsers behaving
> differently!!!

HTML layout - css styled - footer

Thread Tools

Display

HTML layout - css styled - footer

Similar Questions and Discussions

Dynamic XML page styled with XSL page

importing .html into webpage messes up layout

Footer Help

Is it possible to create a custom header/footer - not with column names but with html

Carbon Styled Text Editor

Re: HTML layout - css styled - footer

Re: HTML layout - css styled - footer

Posting Permissions