CSS & Absolute Positioning problem

Dev Shed Forums Sponsor:

May 4th, 2003, 03:13 PM

InsaneleSS

Registered User

Join Date: May 2003

Posts: 6

Time spent in forums: 22 m 33 sec
Reputation Power: 0

CSS & Absolute Positioning problem

I was wondering if there was a way to have:

position: absolute;
height: 100%;
background-color: #660066;

And have it so if you have to scroll down on the page that the background color will follow down the page, instead of stopping from what the page originally shows. Is that possible with absolute positioning?

May 5th, 2003, 02:05 PM

InsaneleSS

Registered User

Join Date: May 2003

Posts: 6

Time spent in forums: 22 m 33 sec
Reputation Power: 0

so what do you guys think? Do I have to get out of the absolute positioning for it to work? or is there something else I could do?

May 5th, 2003, 02:43 PM

jerom

Contributing User

Join Date: May 2003

Posts: 1,014

Time spent in forums: 1 Day 21 h 56 m 52 sec
Reputation Power: 14

The answer: yes, you can.

The question is: 100% of what? What is the containing block and what is its height? What type of element is it?

My first guess: you set the height to 100% of the viewport and that's apparently not what you want.
If my guess is correct, set it to auto (which is default, as far as I know).

Here's a trivial example proving that it can work:

Code:

<style type="text/css">
body {
	background-color: red;
}
#mydiv {
	position: absolute;
	top: 50px;
	left: 50px;
	background-color: blue;
}
</style>

Hope this helps,
Jeroen

May 5th, 2003, 08:59 PM

InsaneleSS

Registered User

Join Date: May 2003

Posts: 6

Time spent in forums: 22 m 33 sec
Reputation Power: 0

Well here's what I've got...If I put the height to auto then it doesn't color any of the background for the page I'm working on
#menu {
position: absolute;
width: 160px;
height: 100%;
padding-top: 100px;
left: 0;
background-color: #660066;
}

I pull it from a php page
print " <div id=\"menu\">\n";

Perhaps that has something to do with it just filling up the amount shown on the screen, but I don't see how.

May 5th, 2003, 09:19 PM

jerom

Contributing User

Join Date: May 2003

Posts: 1,014

Time spent in forums: 1 Day 21 h 56 m 52 sec
Reputation Power: 14

The information you provide is not enough to see where the problem lies.

If your #menu would be inside an absoluted positioned element that has a height of 30px, you'd only see 30px plus 100px (padding of #menu) of the background-color for your menu.

So it really comes down to: what's the parent of your #menu, and what's the style for that? How is the document structured?

Jeroen

May 22nd, 2003, 09:53 AM

blancbleu

wibble

Join Date: Oct 2001

Location: UK

Posts: 161

Time spent in forums: 4 h 11 m 49 sec
Reputation Power: 12

I have a question on a similar tack for all you css gurus

I have a parent div (position: relative) which I want to use to house 3 columns of content.

I've made these three columns position: absolute so that I can position them horizontally within the div and so that each starts at the top of the parent div.

each has a unique background colour and I want all three to fill the background to the same height (which will be the height of the column with the most content).

The current problem is that each column only fills in the background colour for the height of its content, not the height of the longest column

I can't use Height: 100% for each column as the parent div has no height defined as the height is unknown and could vary according to what content is in the columns

so

question(a) how to get the background colour of each to stretch to the height of the longest column so that it all looks pretty.

question (b) - I want a footer element below these columns. As they are position:absolute they are treated as if they are on their own separate layer and the footer element sits on top of them at the top (again because the parent div has no height assigned I guess).

I could use javascript to sort some of this out on page load but 10% of users surf with javascript turned off so thats not acceptable.

Can anyone offer suggestions.

Many thanks

Last edited by blancbleu : May 22nd, 2003 at 10:41 AM.

May 22nd, 2003, 03:59 PM

adios

Senior Citizen

Join Date: Jan 2001

Location: leftcoast

Posts: 2,019

Time spent in forums: < 1 sec
Reputation Power: 15

blancbleu -

I've never found a satisfactory way to do this w/o some sort of scripting hack. It's the old 'bottom-justify-your-table-columns' business. There are W3C proposals afoot - maybe they've been accepted - to expand control over columns. There are postings all over on this & related topics. Here's a scripted thing:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

var str = 'Developer Shed - The Open Source Web Development Site. ';
var idx = 0;

function justify() {
     var mid_col = document.getElementById('mid_col');
     var mid_col_height = mid_col.offsetHeight - 20;
     document.getElementById('left_col').style.height = mid_col_height;
     document.getElementById('right_col').style.height = mid_col_height;
     var content_el = document.getElementById('content');
     if (content_el.offsetHeight + content_el.offsetTop > document.getElementsByTagName('html')[0].offsetHeight - 20)
         clearInterval(TID);
}

function go() {
     var content_el = document.getElementById('mid_col');
     var chr = str.charAt([idx++]);
     if (idx == str.length) 
         idx = 0;
     content_el.innerHTML += chr;
     justify();
}

onload = function() {
     TID = setInterval('go()',10);
}

</script>
<style type="text/css">

body {
font: 12px verdana, arial, helvetica, sans-serif;
text-align: center;
background: url(http://www.light-speed-web-graphics.com/stripes_vertical/fastest_00103.GIF);
}

div#content {position: relative;width: 780px;border: 1px black solid;}

div#left_col {float: left;width: 240px;text-align: left;padding: 10px;background: coral;}

div#mid_col {float: left;width: 240px;text-align: left;padding: 10px;background: peru;}

div#right_col {float: left;width: 240px;text-align: left;padding: 10px;background: salmon;}

div#footer {position: relative;width: 100%;height: 40px;background: olive;}

</style>
</head>
<body>
<div id="content">
<div id="left_col"></div>
<div id="mid_col"></div>
<div id="right_col"></div>
<div id="footer"></div>
</div>
</body>
</html>

...hardly the answer.

May 22nd, 2003, 04:12 PM

blancbleu

wibble

Join Date: Oct 2001

Location: UK

Posts: 161

Time spent in forums: 4 h 11 m 49 sec
Reputation Power: 12

Thanks for your thoughts and views anyway adios.
I figured it wasn't the simplest of tasks as all the sites listed here are happy to show a 3 column layout etc. but conveniently their content doesn't have to level up afterwards to accomodate a footer etc

I have used code similar to yours previously but was hoping someone had managed to avoid javascript.

Thanks anyway

Jon

edited to add: couple of interesting links you included there. at least I now know its a common problem and not just me being a thickie!

Last edited by blancbleu : May 23rd, 2003 at 04:49 AM.

May 23rd, 2003, 12:48 AM

Eclipce

Contributing User

Join Date: Sep 2000

Posts: 763

Time spent in forums: 1 Day 5 h 48 m 41 sec
Reputation Power: 0

That code that adios posted works fine in IE however it does not seem to work in Mozilla. I have tried to coax it into working, but I can not seem to get it. If anyone can get this to work in Mozilla it would be great.

Maybe sleep would help me :P

#10

May 23rd, 2003, 03:53 AM

blancbleu

wibble

Join Date: Oct 2001

Location: UK

Posts: 161

Time spent in forums: 4 h 11 m 49 sec
Reputation Power: 12

have managed to satisfy my needs (by changing my requirements a little

)

I've used float: left instead of position: absolute for my child divs (something useful learnt there!) and assigned a transparent background image to the parent div. This allows me to place a footer div at the bottom of the longest column without the need to resort to js.

Luckiliy I don't really need individual background colours for my columns - that was just a personal desire while I was developing the page.
You could however make the background image of the parent div match the column styles (background colours, vertical borders etc.) if you had fixed width columns.
As for the 3 fluid column layout - the footer thing would still work (I should think) but not researched how to colour the columns etc. Time is precious!

Regards
Jon

so far I've only tried it in IE & mozilla - other browsers will follow and probably throw up some catastrophic problems then

HELP:
Does anyone know if this is a particularly bad way to go about solving this problem as I've not seen it mentioned anywhere else - maybe background-image for container div is not an elegant solution?

Last edited by blancbleu : May 23rd, 2003 at 04:52 AM.

#11

May 27th, 2003, 08:42 AM

blancbleu

wibble

Join Date: Oct 2001

Location: UK

Posts: 161

Time spent in forums: 4 h 11 m 49 sec
Reputation Power: 12

ok another question...

I originally did my 'all css' site using quite a bit of position: relative container elements which would then house position: absolute child elements such as columns etc.

Upon seeing other peoples use of css many had used float: left instead of absolute positioning.

pros and cons of each anyone? Is one better than the other in general for a 'pure css' page?

I appreciate that in certain circumstances one technique might be preferable but I have found it fairly easy to produce the same page using both so just curious as to people's preferred technique

CSS & Absolute Positioning problem

Developer Shed Advertisers and Affiliates