Accessible Sidebars

Sidebars via float:right

Hello there! I'm a pretty little side float! My message is vacuous and you probably don't care to read me!

Using float:right is a nice idea, because the main body content gets to wrap around it. BUT, for screen readers or non-compliant browsers the side content happens before this paragraph, which isn't ideal.

Nobody wants to wade through the sidebar content before they read the actual content.

Sidebars with absolute positioning

"But wait!" you cry.

"How can you use position:absolute without requiring a set-pixel layout?" you demand to know.

You may already know that absolutely positioned content within a container that is also absolutely positioned gets positioned relative to its parent's bounds, and not the window's. (Read that again. Did you know it?)

What I recently found out is that absolutely positiond content within a container that is explicitely relatively position ALSO is positioned relative to its parent's top-left.

View source on this page to see what I mean. The upshot is that this content is inside a div which uses position:relative to mark the top and right edges of this area, and the sidefloat is positioned with top:0; right:0, placing it within this container.

And, joy oh joi, the sidebar content occurs below the real content in HTML code, no longer in the way.

Of course, as a downside, you no longer get the nice float wrapping.

Hello there! I'm a pretty little side float! My message is vacuous and you probably don't care to read me!