Some CSS help please!

mkahnisbent

I am trying to implement a blog based on http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

I want to make the left menu a bit wider (maybe 100 pixels wider). Does anyone know what values in the CSS I need to change to do this? I've been at it for hours and can't figure it out!

The CSS:
[PHP]
#layoutdims {
clear:both;
background:#eee;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* 2 column left menu settings */
.leftmenu {
background:#FFD8B7;
}
.leftmenu .colright {
float:left;
width:200%;
position:relative;
left:200px;
background:#fff;
}
.leftmenu .col1wrap {
float:right;
width:50%;
position:relative;
right:200px;
padding-bottom:1em;
}
.leftmenu .col1 {
margin:0 15px 0 215px;
position:relative;
right:100%;
overflow:hidden;
}
.leftmenu .col2 {
float:left;
width:170px;
position:relative;
right:185px;
}
[/PHP]

The HTML:
[PHP]
<div class="colmask leftmenu">
<div class="colright">
<div class="col1wrap">
<div class="col1">
<!-- Column 2 start -->
<!-- Column 2 end -->
</div>
</div>
<div class="col2">
<!-- Column 1 start -->
<!-- Column 1 end -->
</div>
</div>
</div>
[/PHP]

Thanks :pac:

lil_lisa

Try increasing the value of

.leftmenu .colright {
float:left;
width:200%;
position:relative;
left:200px;
background:#fff;
}

to the value you want.

mkahnisbent

Thanks for the reply lil_lisa.

Changing that value does increase the size of the left column, but it doesn't move the right column, so you end up with the left column covering some of the right column.

I think a few of the values have to be changed at the same time.

Trojan

As mentioned above, does changing this not work?

.leftmenu .colright {
background:none repeat scroll 0 0 #FFFFFF;
float:left;
left:300px;
position:relative;
width:200%;
}

(line 119 of the linked code)

If not, then I think you're doing something wrong. This works fine, even with a width of 600px here. Check in a different browser also.