Weird CSS Sidebar Issue

Question

Here is the site in question

I've got the sidebar working on any other page of the site except for this one; all of the pages have the same template. The sidebar right now is doing the old "go under the content".

When I try and edit its positioning in Firebug to anything but relative and then change it back to relative, it snaps back into place just fine. However, changes I've made in the code do nothing.

The issue started to appear when I added youtuve videos to the posts.

Any ideas beyond quickly changing the positioning with Jquery?

Answer 1

It looks to me like the position:relative on #sidebar is what is screwing it up. Try changing it to position: static on the sidebar id.

Answer 2

You've got some mising closing tags: [Invalid] Markup Validation of reneewarren.com/category/blog/ - W3C Markup Validator. And try using a plugin to do a valid embed of flash: WordPress › Kimili Flash Embed « WordPress Plugins.

Answer 3

Try moving the sidebar markup before the content markup.

Answer 4

What happens when you remove position:relative from #content? Also, I'm able to duplicate the problem on FF3.0.17 XP

Answer 5

Have you tried setting a high z-index ?

Answer 6

Keep the sidebar where it was (below the <div id="left">) and just change one CSS rule, and add another:

/* layout.css Line 310 */
#content {
  display: block; /* Changed from 'table' */
  overflow: hidden; /* Keeps 'left' and 'sidebar' from overflowing
}

Tested to work: Firefox 2.0 Win, 3.0 Mac/Win, 3.5 Mac; Safari 4; IE6, IE7, IE8; Chrome 3 Win