Grow your CSS skills. Land your dream job.

Sidebar Placement/z-index problem (I think)

  • # August 27, 2009 at 1:58 pm

    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:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



    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…

    # August 27, 2009 at 4:46 pm

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

    # August 27, 2009 at 6:39 pm

    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:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



    # August 28, 2009 at 4:58 am

    Congrats..

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".