SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    GRAPHIC DESIGNER visualkreations's Avatar
    Join Date
    Sep 2005
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can i set a div at the bottom of the page?

    Hi,


    How can i set a div to always be at the bottom of the page but 100px above the bottom, not the bottom of the screen , but at the bottom of the page.


    Thanks

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Place it after the rest of the content in the html, and give it a 100px bottom margin?

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Place it after the rest of the content in the html, and give it a 100px bottom margin?
    I was working up an example, and that's exactly how I was going about it too.
    I gave a 70px bottom margin and a 30px footer to give it a total of 100px off the bottom. You are going to have limitations however you go about it, for example this way you will not be able to have any text below it if you want to keep the 100px true.

    It might help if you can explain further what your plans are for it.

    Here is a simple example

    Code HTML4Strict:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Bottom Div Demo</title>
    <meta name="generator" content="PSPad editor, www.pspad.com"/>
    <style type="text/css">
    <!--
    /*----------  Resets ----------*/
    body, address, blockquote, dl, ol, ul, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, pre {
        margin:0;
        padding:0;
    }
    body {
        background: #596F80;
        margin:10px auto;
        font:100% trebuchet,arial,tahoma;
    }
    #wrapper {
        width: 780px;
        min-height:600px;
        background-color: #CFD4E6;
        margin:0 auto;
        border:1px solid blue;
    }
    #header{
        min-height:75px;
        background: #888FFF;
        border-bottom:1px solid blue;
    }
    * html #header {height:75px}
    #header h2{padding:10px}
    #navbar {
        height:1.5em;
        background:#99CCCC;
        border-bottom:1px solid blue;
        text-align:center;
    }
    #navbar h4 {line-height:1.5em}
    #content {
        float:left;
        background:#CFD4E6; 
        text-align:justify;
        line-height: 1.25em;       
    }
    #content h4, #bottomdiv h4 {padding-top:10px}
    #left {
        background: #888FFF;
        min-height:250px;
        width: 200px;
        float: left;
        margin: 10px;
        border:1px solid blue;
        text-align:left;
        display:  inline; /*fix IE6 double margin bug*/
    }
    * html #left {height:250px;} /*IE6 treats height as min height*/
    #bottomdiv {
        background: skyblue;
        height:100px;
        width: 680px;
        margin:0 auto;
        margin-bottom:70px;
        clear:both;
        text-align:center;
        border:2px solid blue;
    }
     
    p {margin:10px;}
    #footer {
        width:100%;
        height:30px;
        background: #888FFF;
        text-align:center;
        border-top:1px solid blue;
        clear:both;
    }
    #footer h4 {line-height:30px}
    -->
    </style></head><body>
    <div id="wrapper">
        <div id="header">
            <h2>One Column Layout Demo</h2>
        </div>
        <div id="navbar">
            <h4>navigation menu</h4>
        </div>
        <div id="content">
        <div id="left">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
    lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
    adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius.</p>
        </div> <!-- end left -->
            <div id="right">
            <h4>Page Title</h4>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
    lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
    adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius.</p>
        </div> <!-- end right -->
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
    lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
    adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
    sociis natoque penatibus et magnis dis parturient montes, nascetur
    ridiculus mus. Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    mus. Donec semper ipsum et urna. Ut consequat neque vitae felis.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Mauris vel magna. Mauris risus nunc, tristique varius, gravida in,
    lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue
    adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum
    sociis natoque penatibus et magnis dis parturient montes, nascetur
    ridiculus mus. Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis
    natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    mus. Donec semper ipsum et urna.</p>
     
        </div> <!-- end content -->
     
        <div id="bottomdiv"><h4>This is #bottomdiv container</h4></div>
     
        <div id="footer">
        <h4>footer stuff here</h4>
        </div>
    </div> <!-- end wrapper -->
     
    </body></html>

  4. #4
    GRAPHIC DESIGNER visualkreations's Avatar
    Join Date
    Sep 2005
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a way to do it using Absolute positioning?

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the overall site container has a relative position (and does actually enclose the site), then a div can be placed absolutely with bottom: 100px;.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Is there a way to do it using Absolute positioning?
    Ye you could set position relative on the parent and make sure the parent has enough padding on the bottom to protect the absolute element and then place the absolute element at bottom:100px.

    Here's an old similar example.

    http://www.pmob.co.uk/temp/text-at-bottom3.htm

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    There's an echo in the forums today


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
  •