Treehouse: 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:

    But I only manage to get this:

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

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

    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 ;)

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

    # August 28, 2009 at 4:58 am


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

You must be logged in to reply to this topic.