vertical scrolling + margin-bottom

Discussion in 'HTML' started by Bazley, Jan 1, 2008.

  1. Bazley

    Bazley Guest

    I have added margin-bottom: 30px; to the 'main' div (all code below),
    in an attempt to leave 30 px permanently at the bottom of the page.
    But when the content of the main div extends beyond the bottom of the
    screen and a scroll bar appears, it stops scrolling after the border
    of main and ignores the margin. What's the problem? Thanks!

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>mysite</title>
    <link rel="stylesheet" type="text/css" href="mysite.css" />
    </head>
    <body>
    <div id="main">

    help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>

    help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>

    help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>

    help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>

    help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>
    </div>
    </body>
    </html>


    html, body, main {
    margin: 0;
    padding: 0;
    border: 0;
    }

    html {
    height: 100%;
    }

    body {
    height: 100%;
    background-color: black;
    }

    #main {
    position: relative;
    top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    margin-bottom: 30px;
    width: 300px;
    min-height: 750px;
    border: 5px solid aqua;
    background-color: teal;
    }
    Bazley, Jan 1, 2008
    #1
    1. Advertising

  2. Bazley

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Tue, 01 Jan 2008 12:59:36
    GMT Bazley scribed:

    > I have added margin-bottom: 30px; to the 'main' div (all code below),
    > in an attempt to leave 30 px permanently at the bottom of the page.
    > But when the content of the main div extends beyond the bottom of the
    > screen and a scroll bar appears, it stops scrolling after the border
    > of main and ignores the margin. What's the problem? Thanks!
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > <html xmlns="http://www.w3.org/1999/xhtml">
    > <head>
    > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    > <title>mysite</title>
    > <link rel="stylesheet" type="text/css" href="mysite.css" />
    > </head>
    > <body>
    > <div id="main">
    >
    > help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br
    > >help<br>help<br>

    >
    > help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br
    > >help<br>help<br>

    >
    > help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br
    > >help<br>help<br>

    >
    > help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br
    > >help<br>help<br>

    >
    > help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br
    > >help<br>help<br>

    > </div>
    > </body>
    > </html>
    >
    >
    > html, body, main {
    > margin: 0;
    > padding: 0;
    > border: 0;
    > }
    >
    > html {
    > height: 100%;
    > }
    >
    > body {
    > height: 100%;
    > background-color: black;
    > }
    >
    > #main {
    > position: relative;
    > top: 0px;
    > margin-left: auto;
    > margin-right: auto;
    > margin-top: 15px;
    > margin-bottom: 30px;
    > width: 300px;
    > min-height: 750px;
    > border: 5px solid aqua;
    > background-color: teal;
    > }


    It works in Opera <g>.

    I dunno, I think it's a long-time flaw in the way Moz and IE typically
    render. Probably your best bet is to put a 30-px height div after
    "main".

    --
    Neredbojias
    Riches are their own reward.
    Neredbojias, Jan 1, 2008
    #2
    1. Advertising

  3. Bazley

    dorayme Guest

    In article
    <
    >,

    Bazley <> wrote:

    > I have added margin-bottom: 30px; to the 'main' div (all code below),
    > in an attempt to leave 30 px permanently at the bottom of the page.
    > But when the content of the main div extends beyond the bottom of the
    > screen and a scroll bar appears, it stops scrolling after the border
    > of main and ignores the margin. What's the problem? Thanks!
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN"

    ....
    > <div id="main">
    >
    > help<br>
    >


    I last snip your doc at the point it goes wrong. Why bother with
    XHTML anyway?

    But let us not quibble; more importantly, why so much specifying
    for heights? Try this simpler variation:

    body {background: black;}

    #main {
    margin: auto;
    margin-top: 15px;
    margin-bottom: 30px;
    width: 300px;
    min-height: 750px;
    border: 5px solid aqua;
    background-color: teal;
    }

    and use <br /> with your doctype.

    --
    dorayme
    dorayme, Jan 1, 2008
    #3
  4. Bazley

    GTalbot Guest

    On 1 jan, 07:59, Bazley <> wrote:
    > I have added margin-bottom: 30px; to the 'main' div (all code below),
    > in an attempt to leave 30 px permanently at the bottom of the page.
    > But when the content of the main div extends beyond the bottom of the
    > screen and a scroll bar appears, it stops scrolling after the border
    > of main and ignores the margin. What's the problem? Thanks!


    Hello Bazley,

    It is always better and preferable to upload all your code into a
    webpage and then just post an url to such webpage. Over here, I have
    to do all that so that I can examine your webpage. Other readers of
    your post wishing to examine your code and provide some explanations,
    feedback have to do the same thing too.


    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    Why a transitional DTD? Your HTML document is certainly, definitely
    new.

    Also, why XHTML... if you are going to serve that HTML document as
    "text/html" and not as "application/xhtml+xml"?


    > <html xmlns="http://www.w3.org/1999/xhtml">
    > <head>
    > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    > <title>mysite</title>
    > <link rel="stylesheet" type="text/css" href="mysite.css" />


    Is all your CSS code in the sample below .. or is there more in
    mysite.css? Again, uploading your code into a webpage and then posting
    an URL would be better for everyone.

    > </head>
    > <body>
    > <div id="main">
    >
    > help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>
    >
    > help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>
    >
    > help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>
    >
    > help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>
    >
    > help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>
    > </div>
    > </body>
    > </html>
    >
    > html, body, main {
    > margin: 0;
    > padding: 0;
    > border: 0;
    >
    > }



    By default, the html element does not have any margin, padding and
    border in all modern browsers. You're unneedlessly over-declaring
    here.

    If you explicitly and specifically want a "30 px permanently at the
    bottom of the page", then why do you set all 4 margins of the body
    element to 0?

    Is it main or #main ? Your CSS code as posted has a parsing error.

    >
    > html {
    > height: 100%;
    >
    > }
    >
    > body {
    > height: 100%;
    > background-color: black;
    >
    > }
    >
    > #main {
    > position: relative;
    > top: 0px;
    > margin-left: auto;
    > margin-right: auto;
    > margin-top: 15px;
    > margin-bottom: 30px;



    You are re-declaring the 4 margins of your #main node here, otherwise
    you had earlier a CSS syntax error.


    > width: 300px;
    > min-height: 750px;


    1- If you want the root element and the body element to fill the
    user's browser window viewport's height, then why do you set the #main
    to a min-height value? Your CSS declaration is not coherent with the
    CSS rules before.

    2- If you want the root element and the body element to fill the
    user's browser window viewport's height, then why don't you remove the
    #main node and transfer its declarations to the body node? Your #main
    node duplicates entirely the purpose and function of the body node in
    your code. Your DOM tree could be reduced here.

    3- if you explicitly wanted to remove the margin-top and margin-bottom
    to the body node, then why do you later explicitly set, add a margin-
    top and a margin-bottom to the #main node? What you are doing does not
    seem to me to be perfectly coherent... otherwise your stylesheet and
    DOM tree could be optimized, more compact.


    > border: 5px solid aqua;
    > background-color: teal;
    >
    > }


    Regards, GĂ©rard
    --
    Internet Explorer 7 bugs
    http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
    GTalbot, Jan 1, 2008
    #4
  5. Bazley

    Ben C Guest

    On 2008-01-01, Bazley <> wrote:
    > I have added margin-bottom: 30px; to the 'main' div (all code below),
    > in an attempt to leave 30 px permanently at the bottom of the page.
    > But when the content of the main div extends beyond the bottom of the
    > screen and a scroll bar appears, it stops scrolling after the border
    > of main and ignores the margin. What's the problem? Thanks!

    [...]
    > body {
    > height: 100%;


    This is the first part of the problem. Since body is height: 100%, it's
    only the height of the html element, which is the height of the viewport
    (you also set height: 100% on that).

    #main is much higher than the viewport, so it overflows the body.
    There's therefore not going to be a gap of 30px between the bottom of
    #main and body.

    The browser just allows you to scroll to the bottom of #main and no
    further. Maybe some browsers let you scroll to the bottom of its margin,
    but they don't have to.

    So first remove height: 100%. Now you will find it still doesn't work
    because #main's bottom margin collapses against the bottom margin of
    body. You want that margin between the bottom of #main and the bottom of
    body.

    So give body 1px of bottom padding and that will prevent its bottom
    margin collapsing against its child. You can change #main's margin to
    29px if you're bothered by the 1px.

    Or just put 30px of padding-bottom on body and don't use a bottom margin
    on #main at all.
    Ben C, Jan 1, 2008
    #5
    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. alice
    Replies:
    3
    Views:
    377
    Ben C
    Aug 4, 2007
  2. GTalbot
    Replies:
    0
    Views:
    558
    GTalbot
    Nov 10, 2007
  3. dorayme
    Replies:
    22
    Views:
    6,744
    dorayme
    Mar 17, 2008
  4. Cal Who
    Replies:
    1
    Views:
    428
    Alexey Smirnov
    May 16, 2010
  5. Cal Who
    Replies:
    4
    Views:
    574
    Cal Who
    May 17, 2010
Loading...

Share This Page