Re: Why the large gap at the end?

On 2009-07-19, Doug Miller <spambait@xxxxxxxxxx> wrote:
http://www.milmac.com/example.php

The page validates, and is rendered nearly identically by FF3, IE7, Opera9.6,
and Safari4.0. The appearance is almost exactly as desired -- except for that
large gap of white space at the bottom, between the last image and the footer
containing the copyright notice.

If I remove the footer, the white space remains. Where is it coming from?

It is the space occupied by div#Delta. You've given that div position:
relative and top: -28em.

The way that works is that the div is just _drawn_ 28em higher up, but
from the point of view of the layout of everything else on the page, it
is still exactly where it was before.

The footer is just a normal flow div so it just goes underneath
div#Delta (or rather underneath the hole left behind by div#Delta before
it was whisked 28em higher up).

The only way I've found so far of getting rid of the gap is by setting the
footer DIV's margin-top style to a large negative number, e.g. -25em. The
trouble with that, though, is that I use the same footer on a number of other
pages, and I'd prefer to have consistent styles on all pages.

It looks like you've got yourself into all kinds of trouble with all
this relative positioning.

You started moving things up a bit with it, near the top of the page,
but they haven't really moved up because this is relative positioning,
so you've needed bigger and bigger offsets as you got down that page,
resulting in a bigger and bigger divergence between where things are and
where they appear to be, which has reached a 28em error by the bottom of
the page.

I would recommend that you hardly ever want to set top, left, right or
bottom if you use position: relative. About the only good use for it is
its side-effects: making containing blocks for positioned descendents
and so that you set z-index on things.

The only time you actually want to offset anything that's position:
relative is with small amounts of top and bottom as a better
vertical-align for doing linebox-height-preserving sub- and superscripts.

So how to solve your original problem and avoid all this? The quick
answer is that if you want to move something up, a negative top margin
moves it properly rather than only making it look as though it's moved
which is what position: relative does, but you do have to be aware of
margin-collapsing.

But I don't think that's solving the real problem here-- why are you
needing to move things up in the first place? It looks like you're
trying to re-arrange floats with this, but there's probably a simpler
fix that just involves floating things differently.

What's the intended layout? It looks like just paragraphs of text
containing alternately left and right floated images would work fine
here.
.

Relevant Pages

  • Re: Why the large gap at the end?
    ... large gap of white space at the bottom, between the last image and the footer ... If I remove the footer, the white space remains. ... so you've needed bigger and bigger offsets as you got down that page, ...
    (alt.html)
  • Re: Why the large gap at the end?
    ... If I remove the footer, the white space remains. ... The intended layout is as shown. ... without the ocean of white space at the bottom. ...
    (alt.html)
  • Space between footer and text?
    ... I can't seem to decrease the white space between the bottom of my text and ... the top of the footer. ... Any advice? ...
    (microsoft.public.word.pagelayout)
  • Re: Footers - where are they measured from?
    ... When your bottom margin is 3 cm and the footer margin is 1 cm, ... the footer is at 1 cm (that is, Word allows 1 cm between the footer and the ... > "Suzanne S. Barnhill" wrote in message ...
    (microsoft.public.word.docmanagement)
  • Re: lines getting cut off
    ... If you have set the bottom margin to 0cm, the footer is definitely in the non-printable area. ... Only professional printers have the capability of printing close to the edge of the page and often printing right to the edge is achieved by using over-size pages and trimming off the excess after printing. ...
    (microsoft.public.word.application.errors)