PDA

Click to See Complete Forum and Search --> : Absolute positioning question?



hothousegraphix
04-24-2007, 10:57 AM
I'm wondering if it's possible to force an absolulty positioned element (div) to appear behind relatively positioned elements.

I understand that I can affect the stacking order of all my absolutely positioned elements by applying the z-index property; however this only affects those elements. By applying the position: absolute property to an element it removes that element from the flow of content and places it above.

If I want to force a div to the bottom of my browser window I apply this:

#someElement
{
position: absolute;
bottom: 0;
z-index: 10;//trying to force behind all other content
}


But if I want that div to appear behind all other content on the page...how do I go about this?

Thanks.

rdoyle720
04-24-2007, 12:04 PM
You'd have to position: absolute or position: relative the rest of the page content and give it a z-index greater than your footer.

hothousegraphix
04-24-2007, 01:22 PM
Well, I've actually tried that...to no avail. I'm here now (see below) and it's works (sort-of) in IE, but not FF. The trouble in IE is that the absolutely positioned div will re-draw properly by scaling the browser window-size; however, if you scroll, the absolutely positioned div remains fixed in position and scrolls with the content rather then staying at the bottom of the browser window.

I could use JS to position this div to ensure it stays fixed at the bottom of the browser window but I was seeking out a pure CSS solution.

Here's the layout:

<!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=utf-8" />
<title>Layout Test</title>
<style type="text/css" media="screen"><!--
body
{
margin: 0px;
padding: 0px;
}

#header
{
display: block;
height: 75px;
background-color: #0066ff;
}

#container
{
position:relative;
background-color: #ff66ff;
height: 800px;
width: 250px;
margin-left:auto;
margin-right:auto;
}

#footer
{
height: 75px;
background-color: #6666ff;
}

#baseBG
{
position:absolute;
z-index: -1;
background-color: #333333;
height: 125px;
width: 100%;
margin: 0;
left:0;
bottom: 0;
}

--></style>
</head>

<body>
<div id="header"></div>
<div id="container"></div>
<div id="footer"></div>
<div id="baseBG"></div>
</body>

</html>

THANKS

hothousegraphix
04-24-2007, 03:14 PM
Probably best to attach an example of what I'm attempting to achieve. I've come up with a center-aligned layout whose height expands based on the amount of content. The very traditional header, content, footer scenario.

If you take a look at the attached image you'll notice at the bottom of the layout, just above the footer, a pattern (which will tile) that sits in both the left and right margin of the layout.

I may have designed something I can't reproduce. That said, I'm giving it a go. The trouble is, this tiled pattern can not be part of the footer because if it were it would obscure the main content. It can't be defined as a bg for the main content because I'm not using a fixed height.

One solution that might be an option, might be to split my main container into two, this would then allow me to define a new bg image for the second container which I could then set at a fixed height (determined by the size of the bg pattern gradient).

As you can see I'm tying to work all this out.

The only issue with that solution is that I split the flow of content.

hothousegraphix
04-24-2007, 05:05 PM
OK, so my thought seems to be getting me somewhere, but I now have a new issue which I've encountered before. If my page content does not force the footer below the fold of the page I need my footer height to occupy the balance of the remaining real estate. Problem is, setting the footer height to 100% does not achieve that.

Any ideas how to get a div to occupy all available space?

Thanks



<!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=utf-8" />
<title>Layout Test</title>
<style type="text/css" media="screen"><!--
body
{
margin: 0px;
padding: 0px;
}

#header
{
display: block;
height: 75px;
background-color: #0066ff;
}

#container-top
{
position:relative;
background-color: #cccccc;
height: auto;
width: 100%;
margin-left:auto;
margin-right:auto;
}

#container-bottom
{
position:relative;
background-color: #999999;
height: auto;
width: 100%;
margin-left:auto;
margin-right:auto;
}

#content-1
{
position:relative;
background-color: #ff66ff;
height: 275px; /*used only to emulate height of content*/
width: 250px;
margin-left:auto;
margin-right:auto;
}

#content-2
{
position:relative;
background-color: #ee66cc;
height: 250px; /*used only to emulate height of content*/
width: 250px;
margin-left:auto;
margin-right:auto;
}

#footer
{
/*I want the footer to occupy the balance of the window height should my content
not extend below the fold*/
height: 100%;
min-height: 125px;
background-color: #6666ff;
}

#baseBG
{
position:absolute;
z-index: -1;
background-color: #333333;
height: 125px;
width: 100%;
margin: 0;
left:0;
bottom: 0;
}

--></style>
</head>

<body>
<div id="header"></div>
<div id="container-top">
<div id="content-1"></div>
</div>
<div id="container-bottom">
<div id="content-2"></div>
</div>
<div id="footer">&nbsp;</div>
</body>

</html>

rdoyle720
04-24-2007, 05:19 PM
Keeping the footer stuck to the bottom of the browser can't be achieved in IE 6 via CSS alone (unless you count using expressions, which is really javascript in a CSS file). In Firefox and IE 7 it's as simple as setting position: fixed; bottom: 0. I'm afraid I don't know the javascript for IE 6 off the top of my head, but you can try quirksmode.org to get started. They have a lot of good javascript info.

Now if instead of wanting your footer to always be stuck at the bottom of the window but at the bottom of the window or the bottom of the content (whichever's taller), that's a totally different issue, though it should be possible without Javascript. Which do you want?

hothousegraphix
04-24-2007, 05:25 PM
I'm not really trying to keep the footer at the bottom of my page layout, but rather, I'm wanting to force the footer to occupy all available remaining space when the page content does not force the footer below the fold and the remaining space is greater then the min-height of the footer.

rdoyle720
04-25-2007, 10:22 AM
This should be closer to what you want.

rdoyle720
04-25-2007, 10:34 AM
After re-reading your description, I think you can probably ignore the previous post. That would make a tall footer with the content at the bottom, whereas I think you want it at the top. That's pretty easy to do, and doesn't require any sort of positioning.

Make the height of the body and html tags 100%. Wrap your whole page in a div, and give it a min-height of 100% (height: 100% for IE 6). Then give it the same background color as your footer. Give your footer a height that is equal of the min-height you want it to be. That should do it.

hothousegraphix
04-25-2007, 10:52 AM
ahhhhh...yup...makes total sense.

I just don't understand why, if you define the html and body height at 100% then tell the footer (div) to display at 100% height why it won't occupy the balance of the browser window (if a lack of content creates that situation) .

I'm sure it's an issue with how and what that div is referencing to define it's height. But I thought if the div was a child of the body whose height is defined at 100%, and not sitting inside a container div, that I'd be able to achieve that result.

Obviously not though.

Thanks for sticking with me.

Regards.

hothousegraphix
04-25-2007, 12:14 PM
So, I have it all working. I've taken your concept but not added the additional div. I'm just defining the BG color (same as in the footer) in the body tag.

I've noticed one thing though. If I do, in fact, define my body's height at 100%, FF adds almost 700px to the total height (at the bottom of the page) creating verticle scrolling in situations that it isn't called for. This doesn't occur in IE.

I simply eliminated the height property from the body and all is fine.

Thanks again!