Problem with CSS absolute position/overflow scroll

[Adam Plocher]

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

 

[ironcorona]

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?

 

[Adam Plocher]

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

 

[ironcorona]

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?

 

[Adam Plocher]

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.