Why the large gap at the end?

Discussion in 'HTML' started by Doug Miller, Jul 19, 2009.

  1. Doug Miller

    Doug Miller Guest

    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, Jul 19, 2009
    #1
    1. Advertising

  2. Doug Miller

    Doug Miller Guest

    In article <>, dorayme <> wrote:
    >In article <>,
    > Ben C <> wrote:
    >
    >> On 2009-07-19, Doug Miller <> 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.

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


    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.
     
    Doug Miller, Jul 20, 2009
    #2
    1. Advertising

  3. Doug Miller

    dorayme Guest

    In article <h40hbc$k3j$-september.org>,
    (Doug Miller) wrote:

    > In article <>, dorayme
    > <> wrote:
    > >In article <>,
    > > Ben C <> wrote:
    > >
    > >> On 2009-07-19, Doug Miller <> 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.

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

    >
    > 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,



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

    --
    dorayme
     
    dorayme, Jul 20, 2009
    #3
  4. Doug Miller

    Doug Miller Guest

    In article <>, Ben C <> wrote:
    >On 2009-07-19, Doug Miller <> 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.


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


    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, Jul 20, 2009
    #4
  5. Doug Miller

    Doug Miller Guest

    In article <>, dorayme <> wrote:
    >
    >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.
     
    Doug Miller, Jul 20, 2009
    #5
  6. Doug Miller

    dorayme Guest

    In article <h40kat$svq$-september.org>,
    (Doug Miller) wrote:

    > In article <>, dorayme
    > <> wrote:
    > >
    > >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.


    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.

    --
    dorayme
     
    dorayme, Jul 20, 2009
    #6
  7. Doug Miller

    Doug Miller Guest

    In article <>, Ben C <> wrote:
    >On 2009-07-20, Doug Miller <> wrote:
    >> In article <>, Ben C

    > <> wrote:
    >>>On 2009-07-19, Doug Miller <> wrote:
    >>>> 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.
     
    Doug Miller, Jul 21, 2009
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Neo Geshel
    Replies:
    2
    Views:
    3,722
    Versteijn
    Aug 18, 2004
  2. Jan Doggen

    Printing relative DIVs: large gap

    Jan Doggen, Apr 22, 2005, in forum: HTML
    Replies:
    2
    Views:
    641
    Jan Doggen
    Apr 22, 2005
  3. chlori

    Gap in IE, no gap in FF

    chlori, Jan 19, 2006, in forum: HTML
    Replies:
    1
    Views:
    483
    kchayka
    Jan 19, 2006
  4. Mr. SweatyFinger

    why why why why why

    Mr. SweatyFinger, Nov 28, 2006, in forum: ASP .Net
    Replies:
    4
    Views:
    989
    Mark Rae
    Dec 21, 2006
  5. Mr. SweatyFinger
    Replies:
    2
    Views:
    2,249
    Smokey Grindel
    Dec 2, 2006
Loading...

Share This Page