I've been working on this for hours and I cannot seem to solve it...

Let's say you have a structure like this:


<div wrapper>

  <div container>

      <div content>

        (a bunch of div's where some you don't define "height")

      </div> <!-- end content -->

      <div sidebar>

         (a bunch of div's and sidebar content...)

      </div> <!-- end sidebar -->

  </div>  <!-- end container -->

</div>  <!-- end wrapper -->

</page>  <!-- end page -->

Okay...now as some of you may already know, this is a Wordpress site. I want the sidebar positioned nicely on the right side of the #content. These are the positioning issues I'm having with #sidebar:


Its broken out of the structure of the page and the issue is when someone with a different screen resolution views the page, the position of the sidebar is off.

position:relative; float:left; or float:right;

It falls in line with the rest of #content, thus moving it beneath everything and causing me to have to use negative top positioning to move it in the right place. Now when the page loads...because some div heights are not defined, it's out of position as the page loads the #content, and then it snaps to the correct position once all of the other content is loaded. This is unappealing.

So what can I do to give it a solid spot where its already in the correct position regardless of load time, and screen resolution doesn't affect the positioning?