SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div layer overflowing page

    I am trying to create a div layer with a top offset of 100px
    that goes to 100% of the the page, I have setup the page height to take up
    100% of the window however as soon as I use top: 100px, the div layer
    does not stop at the bottom of the pages but goes lower by 100px, is there any
    way that I can make it start from 100px but stop at the end of the screen
    without changing height: 100%

    the code I use is as follows for the div layer and the body:

    html, body {height:100%}

    #pagecell1{
    position: absolute;
    padding: 3px;
    top: 100px;
    left: 2%;
    right: 2%;
    width:95.6%;
    background-color: #ffffff;
    height: 100%;
    min-height: 100%;
    }

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Location
    Utrecht (Netherlands, the)
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead of:

    Code:
    position: absolute;
    top: 100px;
    maybe:

    Code:
    margin-top: 100px;
    Although I'm not sure if this is what you mean .
    Hippopotomonstrosesquippedaliophobia - Fear of long words

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    free standing layer

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <
    head>
    <
    title>12345 12345 12345 12345 12345</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <
    style type="text/css">
        
    html,body {height:100%}
        
        *{
    padding:0;margin:0;}

        .
    pagecell1{
        
    margin:-2em 2em 0 2em;
        
    background:#ccffcc;
        
    }
        
        * 
    html .pagecell1{height:100%;}
        
    head+body .pagecell1{min-height:100%;}
        
        .
    x{height:4em;background:#ffffff;}
        
    </style>

    </
    head>
    <
    body>
    <
    div class="pagecell1">
    <
    div class="x"></div>
    </
    div>

    </
    body>
    </
    html
    in full action
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <
    title>document title</title>
        <
    style type="text/css">

        
    /* mac hide \*/
        
    htmlbody {height:100%;}
        
    /* end hide */

        
    *{margin:0;padding:0;}
        
        
    body{font-size:75%;background:#a2a2a2;}
        
        
    div{font-size:1em;}
        
        
    /* fonts */
        
    p,b,a,pre,hr,h1,h2,h3,h4,li{
        
    text-align:left;
        }
        
        .
    wra{
        
    margin:-2em 2em 0 2em;
        
    background:#d8d8d8;
        
    border-left:18em solid #b7b7b7;
        
    }
        * 
    html .wra{height:100%;}
        
    head+body .wra{min-height:100%;}
        
        .
    he,.l{position:relative;margin-left:-18em;}

        .
    he{background:#ff8c00;}
        
    html .he{height:1px;}
        
        .
    l{
        
    float:left;
        
    width:18em;
        
    background:#b7b7b7;
        
    }
        
        * 
    html .fcl{clear:both;height:0px;overflow:hidden;}
        
    head+body .fcl{clear:both;height:1px;overflow:hidden;margin-top:-1px;}
        
        .
    wra p{padding:.5em;}
        .
    wra .l p{padding:.5em;}
        .
    he h1{padding:.2em;}
        
        .
    x{height:4em;background:#a2a2a2;margin-left:-18em;position:relative;}
        
    .y{height:2em;margin-left:-18em;position:relative;}
        </
    style

    </
    head>
    <
    body>

    <
    div class="wra">
    <
    div class="x"></div>
    <
    div class="he">
    <
    h1>header</h1>
    <
    p>basic border</p>
    </
    div>

    <
    div class="l">
    <
    p>
    start
    <!--  
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />-->
    end
    </p>
    </
    div>
    <
    p>
    start start start start start start start start start start start start start start start start start start start start 
    start start start start start start start start start start start start start start start start start start start start 
    start start start start start start start start start start start start start start start start start start start start 
    start start start start start start start start start start start start start start start start start start start start 
    start start start start start start start start start start start start start start start start start start start start 
    start start start start start start start start start start start start start start start start start start start start 
    <!-- 
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> -->
    end
    </p>

    <
    div class="fcl"></div>
    </
    div>
    <
    div class="y"></div>
    </
    body>
    </
    html
    Last edited by all4nerds; Jul 4, 2006 at 10:33.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •