#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    6
    Rep 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?
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    6
    Rep 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?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    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
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2003
    Posts
    6
    Rep 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.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    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
  10. #6
  11. No Profile Picture
    wibble
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2001
    Location
    UK
    Posts
    161
    Rep Power
    14
    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 11:41 AM.
  12. #7
  13. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    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&#58; 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.
  14. #8
  15. No Profile Picture
    wibble
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2001
    Location
    UK
    Posts
    161
    Rep Power
    14
    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 05:49 AM.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2000
    Posts
    763
    Rep 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
  18. #10
  19. No Profile Picture
    wibble
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2001
    Location
    UK
    Posts
    161
    Rep Power
    14
    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 05:52 AM.
  20. #11
  21. No Profile Picture
    wibble
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2001
    Location
    UK
    Posts
    161
    Rep Power
    14
    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

IMN logo majestic logo threadwatch logo seochat tools logo