Problem positioning div in page with css

Question

Hi everyone,

I'm having a problem trying to position a div in my web page, here's my test site: http://dirtymind.jvsoftware.com/

The problem is with the left side bar (the one with the login inputs and stuff), it's currently a div which I used negative top and left margins to position it where it is, but depending on the screen resolution it moves to the left or right. Obviously this is beacuse I'm using margins this is how css would work but I don't know how to get this same results otherwise.

Does anyone know how to position my sidebar on place regarding the resolution?

Thanks all in advance.

Answer 1

Well you already have a wrapper in place.... Why not give it a hard width of the main content area+the width of the side bar and any spacing you want between the two. then you can just float both of them to the left. Or you could set the wrappr to position relative (not assigning a position) and then use position absolute on the side bar and punh in the coordinates from 0 point of the wrapper.

Answer 2

Yeah what he said:

<div id='wrapper' style='width:800px'>
  <div id='left-sidebar' style='width:200px;float:left'>
     ...content...
  </div>

  <div id='contenedor' style='width:600px;float:left'>
     ...content...
  </div>

</div>