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

**Googly** · Feb 1, 2008 17:21

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

**semantic7** · Feb 1, 2008 19:00

Yes it is possible. Give the outer div a top and bottom padding of the distance you want at the top and bottom.

**Dan Schulz** · Feb 1, 2008 20:09

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>

**Paul O'B** · Feb 2, 2008 04:43

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

**Dan Schulz** · Feb 2, 2008 04:52

Heh, I forgot about that example, Paul.

**Googly** · Feb 2, 2008 06:16

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.

**Paul O'B** · Feb 2, 2008 07:19

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.

**Googly** · Feb 2, 2008 07:40

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?

**Paul O'B** · Feb 2, 2008 08:19

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

**Googly** · Feb 2, 2008 09:40

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?

**Paul O'B** · Feb 2, 2008 11:51

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

**Googly** · Feb 2, 2008 12:09

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

**Googly** · Feb 11, 2008 16:28

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?

**Paul O'B** · Feb 11, 2008 17:06

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:

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions