I'm in the process of converting all the positioning of UI elements in Scooby from absolute pixel positions to percents, to allow on-the-fly horizontal resizing of the entire UI.
I've got it far enough along now that I can see what it's all going to look like, but it's still a bit like Frankenstein's monster -- stitched loosely together in an ugly way. I can almost see bolts coming out of its neck.
So far the biggest challenge looks like its going to be dealing with the space for the scrollbar on the main scrollable area for normal events that have a set time.
I also haven't ascertained whether or not two block elements overlap if they look like: elementA -- left:0%, width:25%, elementB -- left:25%, width:25%. Basically, does the next element overlap the first if it's left position in percent is the same percent as the width as the element directly to its left? Is that go on 'three,' or 'one, two, three,' and then go?
Is it even possible this will obviate the need for removing that one or two pixels for the CSS border? Could it be so? Pretty please?