Why the large gap at the end?

[Doug Miller]

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?

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.

I've discovered one other unpleasantness: when resizing the page (Ctrl- and
Ctrl+) in FF, Opera, and Safari, everything scales very nicely: the page looks
the same, just bigger (or smaller). When resizing in IE, though, it seems that
the vertical spacing grows or shrinks at about twice the rate at which the
horizontal spacing does -- so it looks terrible except at the default size or
one step above or below that.

Any suggestions?

 

[Doug Miller]

The intended layout is as shown.

Yes... OP should really get rid of nearly all the CSS and all the spans
and get down to basics. Perhaps he might care to start with something
like:

<http://dorayme.netweaver.com.au/leftrightleftright.html>

Thank you for your comments, and for the mockup. That, however, is not the
intended or desired layout -- specifically, the clear:left and clear:right are
a problem. The intent is to produce something that looks like

www.milmac.com/example.php

without the ocean of white space at the bottom.

 

[dorayme]

The intended layout is as shown.

Thank you for your comments,

The main set of comments and analysis (with which I agree) were from Ben
C, the suggested start point in the url above is mine.

and for the mockup. That, however, is not the
intended or desired layout -- specifically, the clear:left and clear:right
are
a problem. The intent is to produce something that looks like

www.milmac.com/example.php

without the ocean of white space at the bottom.

The URL I made for you is supposed to be a starting point, not a
finishing point. You are supposed to add many further instances of class
"left" and "right" divs and there would then not be a huge space below
on tall browser windows. And you might add other things as suits your
purpose and ask detailed questions as you go on...

 

[Doug Miller]

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.

Gotcha. Thanks for the explanation.

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


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

The results were even worse when I tried using absolute 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.

Yep, I understand that now. Didn't before your explanation. Thanks again.

Now my question is -- the elements already appear exactly where I want them to
appear; how do I get them to actually *be* where there appear?

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.

I'm moving them up to achieve the desired look...

What's the intended layout?

Well, as I said initially, it already appears almost exactly as desired,
except for the large white space at the bottom. You've already explained where
that's coming from; I want to learn how to get rid of it.

It looks like just paragraphs of text
containing alternately left and right floated images would work fine
here.

Not quite -- at least, I haven't been able to achieve the desired look by
doing that. In particular, without adjusting the positions of some of the
elements, it doesn't seem possible to achieve these results:

a) In a left-right pair, I want the top of the right image to be higher on the
page than the bottom of the left image.

b) I want to be able to position the text that belongs with a left image to be
higher on the page than the bottom of the *previous* right image.

c) I want the horizontal rules to go "through" the right images, slightly
above the bottom. I don't want them separate.

 

[Doug Miller]

The URL I made for you is supposed to be a starting point, not a
finishing point. You are supposed to add many further instances of class
"left" and "right" divs and there would then not be a huge space below
on tall browser windows. And you might add other things as suits your
purpose and ask detailed questions as you go on...

I understand that. What I apparently failed to make clear is that one aspect
of the desired appearance is that the top of the right image in a left-right
pair be higher on the page than the bottom of the left image, not lower as
appears in your mockup. If there is a way to achieve this without adjusting
the positions of the elements, I don't see how to do it.

 

[dorayme]

I understand that. What I apparently failed to make clear is that one aspect
of the desired appearance is that the top of the right image in a left-right
pair be higher on the page than the bottom of the left image, not lower as
appears in your mockup. If there is a way to achieve this without adjusting
the positions of the elements, I don't see how to do it.

Yes, OK. How about with a negative margin on the divs of class "right"?
See:

<http://dorayme.netweaver.com.au/leftrightleftright.html>

You adjust your margin to suit.

In any design, you need to consider many things at once. What happens
when a person enlarges their text. What about when they have a small
browser/screen, what about if they want to take advantage of bigger in
both. I have changed max width on the wrapper to be more generous than
before as well.

 

[Doug Miller]

http://www.milmac.com/example.php [...]
What's the intended layout?

Well, as I said initially, it already appears almost exactly as desired,
except for the large white space at the bottom. You've already explained where
that's coming from; I want to learn how to get rid of it.

It looks like just paragraphs of text
containing alternately left and right floated images would work fine
here.

Not quite -- at least, I haven't been able to achieve the desired look by
doing that. In particular, without adjusting the positions of some of the
elements, it doesn't seem possible to achieve these results:

a) In a left-right pair, I want the top of the right image to be higher on the
page than the bottom of the left image.

b) I want to be able to position the text that belongs with a left image to be
higher on the page than the bottom of the *previous* right image.

c) I want the horizontal rules to go "through" the right images, slightly
above the bottom. I don't want them separate.

What's wrong with something like this, seems to check boxes (a), (b) and
(c):

http://www.tidraso.co.uk/misc/floats.html

Ahhh, yes, that's what I was after. Thank you very much. I have the page
looking pretty much the way I want it now. I've needed to adjust some of the
images up or down slightly, by changing top or bottom margins, to get the
effect I'm after, but that's working nicely -- and no ocean of white space at
the bottom, and it resizes smoothly in every browser I've tried it with.

Thanks again. That example has immensely improved my understanding of how the
elements are positioned on the page.