Sidebar Placement/z-index problem (I think)

[AzizLight]

Hi everybody,
I am trying to design a nice layout for my site, but I am having some problems with the css. Basically I want the sidebar to be on top of the main content (centered) and the header (full width). In other words I want to have something similar to this:
http://uselessgeek.com/youjiii/tests/z-index_tests.png

But I only manage to get this:

http://uselessgeek.com/youjiii/tests/z-index_tests.html

Here is the html/css (that I put in the same file for the sake of testing)

Code:

Does anybody have any hints or ideas on how I could achieve this (in the cleanest way possible) please?

EDIT: I can’t use absolute positionning because if I do the sidebar won’t move if I resize the window size. So on big screens since the main content is always centered, the sidebar will end up on top of it. Same problem if I want to make the layout liquid (or elastic for that matter).
That’s why I was trying to solve the problem with z-index…

[AlCapone]

I might be missing something obvious but i cant see any differance bettween the image and what you already have…

[AzizLight]

Yeah I’m sorry, I actually found the solution and fixed the problem. What I had to do is set the page-wrap to position: relative and then position the sidebar absolutely. In the beginning I was just floating it and using z-index which didn’t work at all..

Here is the new code, Problem solved ;)

Code:

[AlCapone]

Congrats..

[Author]

Posts