SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DIV needs to always be x pixels from top and y pixels from bottom of page

    Is it possible to have the top of a div positioned so that it is always a consistant number of pixels from the top of the page, AND the bottom of the same div is a consistant number of pixels from the bottom of the page.

    The height of the div is determined by the amount of text within it, but as I said, the bottom of the div always remains the same distance from the bottom of the page. NB This is the bottom of the page and not the bottom of the browser window.

    Be good to hear your thoughts.....

  2. #2
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes it is possible. Give the outer div a top and bottom padding of the distance you want at the top and bottom.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not going to be easy though. Here's a rough example of what you're looking at; I don't know if it'll stand up to the rigors of actual site development though. Bear in mind though that this example uses a percentage (which is the easiest and perhaps ONLY way of getting the effect you want without having to resort to absolute and/or fixed positioning, which can get very messy REAL quick - and cause all kinds of problems in IE).

    HTML 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>Untitled Document</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta http-equiv="Content-Style-Type" content="text/css" />
    	<meta http-equiv="imagetoolbar" content="no" />
    	<meta name="description" content="A brief description of the current page goes here." />
    	<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished" />
    	<!--<link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection" />-->
    	<style type="text/css">
    		
    		* {
    			margin: 0;
    			padding: 0;
    		}
    
    		html, body {
    			height: 100&#37;;
    		}
    
    		#container {
    			background: #C9F;
    			min-height: 80%;
    			position: relative;
    				top: 10%;
    		}
    
    		* html #container {
    			height: 80%;
    		}
    	</style>
    </head>
    <body>
    	<div id="container">
    		Content content content blah blah blah
    	</div>
    </body>
    </html>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As Dan said this is quite complicated to achieve for IE (if I understand correctly) and I have an example here:

    http://www.pmob.co.uk/temp/2scroll2.htm

    You may need to explain a bit more detail if that's not what you meant

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heh, I forgot about that example, Paul.

  6. #6
    SitePoint Addict
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thanks, I'm playing around with Dan's example a bit. My concept does seem quite difficult. I've attached a gif which gives you a better idea of what I'm trying to achieve. Maybe what I'm looking for exactly can't be done.

    Dan the issues with the code you gave me that I'm trying to solve now are that when the content of the div goes past the bottom of the viewport and when you scroll down there is no gap between the bottom of the div and the bottom edge of the viewport.

    Any suggestions based on the new diagram would be great.
    Attached Images Attached Images

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Any suggestions based on the new diagram would be great.
    Yes, that seems to be exactly what my example does unless I'm missing something.

    Except that you say that the blue div has a height that increases to accommodate the content but that can't possibly be true if the top edge is a fixed distance from the top and the bottom edge is a fixed distance from the bottom. The height will be immaterial because the dimensions will be fixed by the distance from the top and bottom. Height is not an equation here.

    How can the height of the blue div change and yet still be the same fixed distance from the top and bottom? It doesn't add up If the height changes then so will the distance from the top and bottom have to change but eventually that will fail when there is no room for it to fit. The only viable solution is the one I have given above unless you were expecting something else

    I think you need to clarify a little more.

  8. #8
    SitePoint Addict
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok just clearing up the height confusion.

    that can't possibly be true if the top edge is a fixed distance from the top and the bottom edge is a fixed distance from the bottom.
    I think you're talking about a fixed distance from the bottom of the viewport, whereas I'm talking about a fixed distance from the bottom of the page, which could be below the fold. Does that make sense?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think you're talking about a fixed distance from the bottom of the viewport, whereas I'm talking about a fixed distance from the bottom of the page, which could be below the fold. Does that make sense?
    Yes I was thinking about the viewport rather than the bottom of the page but my argument still holds true even in that case. You still want the top of the blue div a fixed distance from the top and the bottom a fixed distance from the bottom of the page. Therefore the height will be dictated by whatever is stretching the page.

    Unless there is nothing else on the page and the footer only follows the content above and moves down with it. In that case you just have a normal layout with margins.

    e.g.
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {margin:auto}
    p{margin:0 0 1em 0}
    #box{
        width:300px;
        margin:200px auto 0;
        background:blue;
        color:#fff;
        z-index:2;
        position:relative;
    }
    #footer{
        width:100&#37;;
        background:red;
        height:75px;
        margin-top:-50px;
        z-index:1;
        position:relative;
        padding-top:25px;
    }
    </style>
    </head>
    <body>
    <div id="box">
        <p>This is the content : this is the content This is the content : this is the content This is the content : this is the content This is the content : this is the content This is the content : this is the content This is the content : this is the content This is the content : this is the content This is the content : this is the content This is the content : this is the content </p>
        <p>This is the content : this is the content This is the content : this is the content This is the content : this is the content This is the content : this is the content This is the content : this is the content This is the content : this is the content This is the content : this is the content This is the content : this is the content This is the content : this is the content </p>
        <p>This is the content : this is the content This is the content : this is the content This is the content : this is the content This is the content : this is the content This is the content : this is the content This is the content : this is the content This is the content : this is the content This is the content : this is the content This is the content : this is the content </p>
    </div>
    <div id="footer">
        <p>Footer</p>
    </div>
    </body>
    </html>
    I don't think I'm getting this lol

  10. #10
    SitePoint Addict
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok yeah that's close Paul and I think our understanding of the height of that div is somewhere between what i think and what you think!

    I'll try and make it clear with 2 scenarios which are illustrated with the attached files.

    Scenario 1: The bottom of the viewport lies above the bottom of the text
    When the viewport is small for example, and the bottom of the div and the footer lie below the fold, the bottom of the div is only about 10-20px from the bottom of the text. So I guess you could say that the text controls the height of the div.

    Scenario 2: The bottom of the viewport lies a long way below the bottom of the text
    If the viewport is maximised and for example there is a small amount of text in the div, the height of the div increases a long way below the last bit of text and stays the same distance (as in the above scenario) away from the bottom of the page. So the Div stretches.

    Does that make sense? I don't know what that does to your thoughts Paul?
    Attached Images Attached Images

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Scenario1 is exactly what my last example was doing and I can't see a difference between the drawing and what the example I posted is doing

    Scenario 2 has changed the rules somewhat in that suddenly for some strange reason the footer is miles away from the text in the blue div. This can only happen if you are forcing the footer down to the bottom of the window so that the blue div stretches. You said the footer followed the content but it doesn't in that drawing and the footer is staying pace with the bottom of the viewport and the blue div matches it also.

    If I am correct then you really only need to implement the sticky footer technique I invented and all the criteria will be met. It just looks like the basic footer at the bottom of the viewport scenario. You just make some space above the text and cover up the background color.

    Here's an example again

    http://www.pmob.co.uk/temp/bluebox.htm

    I'm sure that's close to what you want

  12. #12
    SitePoint Addict
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah Paul your example looks to be very close, you might just be a very clever person! I'm off to play around with it

  13. #13
    SitePoint Addict
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, I've been playing round with turning your code into a two column layout based on the same principles. 2 fixed width columns side by side with the bottom edge of the right column being 20 pixels higher than the bottom edge of the left column.

    I've played around with float: and clear: but no joy at the mo. Any thoughts Paul?

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It gets complicated if you want more than one element and you'd need to resort to a technique I invented here.

    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">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    * {margin:0;padding:0}
    h1,h2,h3,h4,p {margin-bottom:1em;padding:5px;}
    ul{margin-left:16px}
    
    /* mac hide \*/
    html,body{height:100&#37;;}
    /* end hide*/
    body { 
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        background:#Ffff; 
        color:#000;
        text-align:center;
      font-size:x-small
    }
    #outer{
        min-height:100%;
        width:760px;
        margin-left:auto;
        margin-right:auto;
        color:#fff;
        text-align:left;
        position:relative;
        margin-top:-100px;/*Space for footer*/
        z-index:2;
        position:relative;
    }
    * html #outer {    height:100%;}
    #footer{
        background:red;
        border-bottom:5px solid #fff;
        text-align:center;
        height:75px;
        padding-top:25px;
        margin-top:-25px;
        position:relative;
        z-index:1;
    }
    #content{
        width:100%;
        border-top:250px solid #fff;/* make white space*/
        position:relative;
        z-index:2;
        overflow:auto;
    }
    #left{
        float:left;
        width:450px;
    }
    #right{
        width:300px;
        float:right;
    padding:0 0 30px 0;
    }
    .col1{
        position:absolute;
        width:450px;
        background:blue;
        bottom:0;
        height:100%;
        left:0;
    }
    .col2{
        position:absolute;
        bottom:20px;
        background:green;
        width:300px;
        left:460px;
    }
    html>body .col2{top:0}
    
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    .col1,.col2{
        height:1000em;/* must be bigger than you ever need*/
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="outer">
        <div id="content">
            <div id="left">
                <p>Content</p>
                <p>Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here
                    : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : Center content goes here : </p>
            </div>
            <div id="right">
                <p>right content goes here : right content goes here : right content goes here : right content goes here : right content goes here : right content goes here : right content goes here : right content goes here : </p>
            </div>
        </div>
            <div class="col1"></div>
            <div class="col2"></div>
    </div>
    <div id="footer">
        <p>Footer</p>
    </div>
    </body>
    </html>
    Here's a live example:


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
  •