Hello. I'm -ve positioned outside the board.

#board

Demonstrates technique for hiding scrollbars, compensating for width of top and side panels, and centering the board in the resulting space.

scroll.html
A demo of the scrollbar technique.
center.html
A demo of the centering technique.

When animating side panels, width needs to be set on both the panel ghost and its parent cell, which is why they are both given the class left-panel-ghost/right-panel-ghost. The cells have a tendency to collapse or expand otherwise. With jQuery, they need to be animated via the step function, as jQuery will add display: block; to the table cells when animated directly. I wish it didn't.

This seems like a complex structure to get what we want. We need it because our central box can have px or % or auto dimensions, and managing the layout of all that can be quite tricky.

left-panel-toggle
right-panel-toggle