Problem with CSS absolute position/overflow scroll

Discussion in 'HTML' started by Adam Plocher, May 26, 2006.

  1. Adam Plocher

    Adam Plocher Guest

    Hi I seem to be having some weird issues with this code below:

    <div
    style="position:relative;padding:5px;height:500px;overflow-y:scroll;background-color:#eeeeee;width:400px;">
    <div style="position:absolute;bottom:0px;left:0px;width:100%;">
    Test1<br />Test2<br />Test3<br />Test4<br />
    Test1<br />Test2<br />Test3<br />Test4<br />
    Test1<br />Test2<br />Test3<br />Test4<br />
    Test1<br />Test2<br />Test3<br />Test4<br />
    Test1<br />Test2<br />Test3<br />Test4<br />
    Test1<br />Test2<br />Test3<br />Test4<br />
    Test1<br />Test2<br />Test3<br />Test4<br />
    Test1<br />Test2<br />Test3<br />Test4<br />
    Test1<br />Test2<br />Test3<br />Test4<br />
    Test1<br />Test2<br />Test3<br />Test4<br />
    Test1<br />Test2<br />Test3<br />Test4<br />
    </div>
    </div>

    I'm trying to get some text to be positioned at the bottom of a
    scrollable div. The code above will make everything get stuck to the
    bottom, like I want, but the scrollbars are still grayed out. If you
    change the "bottom" css attribute to "top" the scrollbars will be
    active. I tested this in IE6 and Firefox 1.5, same results in both.
    Does anyone know any workarounds I can do to make this work, or maybe a
    different method altogether to position the text to the bottom of a
    scrollable div?

    Thanks a lot

    -Adam
     
    Adam Plocher, May 26, 2006
    #1
    1. Advertising

  2. Adam Plocher

    ironcorona Guest

    Adam Plocher wrote:
    > Hi I seem to be having some weird issues with this code below:


    [snip]

    In the child <div> just remove "position:absolute;bottom:0px;left:0px;"
    Why are you absolutely positioning a div inside a container?
    Positioning takes the child <div> out of the flow and would account for
    your problem.

    For that matter why is the container <div> positioned?


    --
    Brian O'Connor (ironcorona)
     
    ironcorona, May 26, 2006
    #2
    1. Advertising

  3. Adam Plocher

    Adam Plocher Guest

    Thanks for the response Brian, that will fix my scroll bars but it
    doesn't position the stuff to the bottom of the scrollable div, like I
    need it to be. The text within these divs can be of any length,
    sometimes it will need to be scrollable, other times the content will
    be short enough to keep the scrollbars from being active. Regardless,
    I need it to be along the bottom of that parent div.

    If you try this you can see the text gets positioned along the bottom
    of the div, like I want:

    <div
    style="position:relative;padding:5px;height:500px;overflow-y:scroll;background-color:#eeeeee;width:400px;">
    <div style="position:absolute;bottom:0px;left:0px;width:100%;">
    Test1<br />Test2<br />Test3<br />Test4<br />
    </div>
    </div>

    (that was my same example from my original post, only with less text)

    If you remove the absolute positioning, it gets positioned along the
    top of the scrollable div, which is not what I want. It isn't the fact
    that position:absolute that is breaking the scrollbar, because if you
    change "bottom" to "top" it will allow the scrollbars to work, but then
    it's positioned at the top again.

    Thanks
    -Adam
     
    Adam Plocher, May 26, 2006
    #3
  4. Adam Plocher

    ironcorona Guest

    Adam Plocher wrote:
    > Thanks for the response Brian, that will fix my scroll bars but it
    > doesn't position the stuff to the bottom of the scrollable div, like I
    > need it to be.


    I'm not clear on what you're looking for. When the page loads do you
    want to have the scroll bar all the way at the bottom?


    --
    Brian O'Connor (ironcorona)
     
    ironcorona, May 26, 2006
    #4
  5. Adam Plocher

    Adam Plocher Guest

    Basically I need a box with a vertical scrollbar and I need all the
    text within that box to be positioned to bottom left (instead of the
    top left like every other webpage). If the text gets too long for the
    box, the box needs to have scrollbars and allow you to scroll up to the
    top. Items will be getting fed to this box via AJAX, so sometimes the
    box might have a couple things in it and sometimes it might have 100
    items in it (in which case the end-user needs to be able to scroll up
    to the top). Newest items get added to the bottom, oldest items at the
    top.

    Right now I can get the items to stick to the bottom left just fine,
    but the scrollbars don't work. Even when there's more content than can
    fit in the box, the scrollbars are grayed out.
     
    Adam Plocher, May 26, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Luqman
    Replies:
    1
    Views:
    662
    Luqman
    Feb 7, 2006
  2. Ryan Stewart
    Replies:
    2
    Views:
    2,947
    Ryan Stewart
    Mar 4, 2004
  3. Replies:
    7
    Views:
    594
  4. =?ISO-8859-15?Q?Martin_P=F6pping?=

    [CSS] overflow: scroll;

    =?ISO-8859-15?Q?Martin_P=F6pping?=, Aug 24, 2006, in forum: HTML
    Replies:
    2
    Views:
    742
    dorayme
    Aug 24, 2006
  5. john_woo
    Replies:
    15
    Views:
    257
    My Pet Programmer
    Dec 28, 2007
Loading...

Share This Page