views:

136

answers:

0

I'm using YUI to create a 3 column layout like so:

=====================  
=         =  
=====================  
= s  =              =  
= i  =              =  
= d  =              =     
= e  =  body        =
= b  =              =
= a  =              =
= r  =              =
=====================

The sidebar is scrollable (that is, there can be more content inside of it than is visible from the page). The problem that I'm having is with positioning a relative object inside the sidebar (a little clickable widget that's supposed to go between two form elements). If I set something inside the sidebar's position to "relative", IE6 and IE7 can't seem to position it properly. It looks fine when you first load the page, but when you scroll the sidebar up or down, the item stays static on the screen instead of scrolling with the rest of the contents of the sidebar.

It seems like YUI sets the CSS position properties of the layout elements (header, sidebar, and body in this case) to be "absolute", which appears to be the cause of this problem. All the resources I've found online suggest changing the position of the layout element to relative to fix this-- unfortunately I don't think that's an option as long as I'm using YUI. Are there any alternative options?