CSS position:vertically fixed, horizontally centered?

Discussion in 'CSS' started by webweber, Dec 5, 2009.

0
  1. #1
    Hi!

    I have this 3-column layout - see the stripped-down testpage: http://tinyurl.com/yeng6t9

    The 2 outer columns are 'fixed' and stay unmoved when scrolling and thus are always visible. The center column scrolls normally:

    #c1 { position:fixed; top:80px; left:0px; width:280px}
    #c2 { position:absolute; top:80px; left:320px; width:400px}
    #c3 { position:fixed; top:80px; left:760px; width:480px}

    What I would like to change: put these 3 columns into a 'container' which will then be horizontally centered in the window.
    The challenge: the scrolling behavior as described above must not change!


    Is this possible? How?

    Thanks a lot in advance for your help!

    Andreas
    www.motiondraw.com
     
    webweber, Dec 5, 2009 IP
  2. Astroman

    Astroman Well-Known Member

    Messages:
    2,355
    Likes Received:
    71
    Best Answers:
    0
    Trophy Points:
    135
    #2
    I'm not sure it's possible to do that exactly. You could give a kind of false impression of centering by using percentages like this though:

    #c1 { position:fixed; top:80px; left:10%; width:20%}
    #c2 { position:absolute; top:80px; left:30%; width:20%; }
    #c3 { position:fixed; top:80px; left:50%; width:20%}

    I would be interested to see if anyone else can come up with a solution. Also I think position:fixed doesn't work in some version of IE, might be wrong about that though?
     
    Astroman, Dec 5, 2009 IP
  3. webweber

    webweber Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for your reply, Astroman!
    Unfortunately this hack won't work for me as the columns widths must be absolute.
    If nobody comes up with a better solution I'll look into the option of positioning the columns dynamically, through JavaScript, based on the window width.
    Cheers!
     
    webweber, Dec 5, 2009 IP
  4. webweber

    webweber Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    This is the JavaScript solution, repositioning the div-elements on window.onresize:
    http://tinyurl.com/ye43ruj

    Cheers!
    Andreas
    www.motiondraw.com
     
    webweber, Dec 6, 2009 IP
  5. Astroman

    Astroman Well-Known Member

    Messages:
    2,355
    Likes Received:
    71
    Best Answers:
    0
    Trophy Points:
    135
    #5
    It looks the same?
     
    Astroman, Dec 6, 2009 IP
  6. webweber

    webweber Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Oopps - it worked in IE...

    Now that should work in Firefox:
    http://tinyurl.com/yann7yy

    To get it to work in Firefox I head to remove the Doctype:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">



    Still working on Safari though...

    The pleasures of cross-browser issues :)
     
    webweber, Dec 7, 2009 IP
  7. Astroman

    Astroman Well-Known Member

    Messages:
    2,355
    Likes Received:
    71
    Best Answers:
    0
    Trophy Points:
    135
    #7
    That's okay, but you can't really not have a doctype.

    I bet there's a way to get this

    <script type="text/javascript">

function windowWidth () {
  if (window.innerWidth) {
    return window.innerWidth;
  } else if (document.body && document.body.offsetWidth) {
    return document.body.offsetWidth;
  } else {
    return 0;
  }
}

function windowHeight () {
  if (window.innerHeight) {
    return window.innerHeight;
  } else if (document.body && document.body.offsetHeight) {
    return document.body.offsetHeight;
  } else {
    return 0;
  }
}

function refreshLayout () {
  if (width != windowWidth() || height != windowHeight()){
      location.href = location.href;
   }
}

/*  Netscape  */
if (!window.width && window.innerWidth) {
  window.onresize = refreshLayout;
  width = windowWidth();
  height = windowHeight();
}


</script>
    Code (markup):
    to work in standards compliant browsers. I'm a total javascript noob though, so have no idea. :)
     
    Astroman, Dec 7, 2009 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Lawlz, why does you has Nutscrape in there then? Do you really have that browser to test with?? : )

    Actually I'm wondering if this setup can be achieved with CSS Fake Frames. The problem would be keeping the scrollbar on the side of the browser rather than the side of the scrollable element. But it does avoid position: fixed.
     
    Stomme poes, Dec 7, 2009 IP
  9. Astroman

    Astroman Well-Known Member

    Messages:
    2,355
    Likes Received:
    71
    Best Answers:
    0
    Trophy Points:
    135
    #9
    I imagine that's just some old code webweber got from the internet. By 'standards compliant browsers' I mean not Internet Explorer.
     
    Astroman, Dec 7, 2009 IP
  10. webweber

    webweber Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I ran the page through a validator and found plenty of 'errors'. With the help of Google I quickly found the solution: wrap all JavaScript in CDATA tags (and commenting them at the same time, for some old Browsers that don't know CDATA):

    /* <![CDATA[ */

    /* ]]> */


    This is the page:
    http://www.motiondraw.com/md/as_samples/Testing/css_centered_validate.html

    Guess what? It validates just fine: http://validator.w3.org/

    But it will still only center the columns if I remvove the DOC-Type. I'm a bit nonplussed at the moment...

    Cheers!
    Andreas
     
    webweber, Dec 7, 2009 IP