Css positioning in joomla 1.5 template

Question

I've been trying to make a joomla template with on the left and on the right a bar with fixed width. the main div should be responsive.

I managed to create the layout what i want here: http://dennybeulen.nl/rena/nl/over-ons.html

The only thing what is not working is the menu on the left side. When i change the css the menu works, but the layout is not right anymore.

the menu is working if i make these changes (just removed the '-' in front of 130):

div.fluid{
     margin-left: 130px;
}

hope somebody can give me some hints.

Answer 1

Looks like div.fluid is covering your left column. Try making div.left absolutely positioned and setting your div.fluid to having no left margin:

div.fluid{
    float: left;
    width: 100%;
    margin-right: -290px;
    margin-left: 0px;
}
div.left{
    position: absolute;
    width: 130px;
    min-height: 1px;
    padding-top: 10px;
}

Keep in mind, div.left will no longer affect elements floating against it.

Answer 2

@gaynorvader is right in that your middle container lays on top of the menu. Instead of positioning it absolute, you could also just leave everything as is, and only add position:relative;z-index:1 for div.left.