Need some help with understanding existing CSS Layout

Question

I found this great website with different layout examples at http://matthewjamestaylor.com

And in particular this one: link text

(view source for full css and markup)

I am just learning css and couldn't find where can I change modify the width of margins (of the left and the middle columns)

Every value in this layout is connected to another, so if i change at one place it changes other places.

Answer 1

The one on the left is controlled by:

.leftmenu .col2 {
    float:left;
    width:170px;
    position:relative;
    right:185px;
}

Note: the right value is greater than width, which is what controls the left spacing of that column. You would also need to change the last value of the margin.

.leftmenu .col1 {
    margin:0 15px 0 215px;
    overflow:hidden;
    position:relative;
    right:100%;
}

and the 200px left figure here:

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

Notice the pattern? 15 pixels on the left then 170 pixels of content = 170 and 185. Add 15 pixels on the right, go to the next column and then add another 15 pixels and you're at 215 pixels.

Answer 2

First step: install Firebug for Firefox.

There are three connected values you need to change: the width and right of the sidebar (.col2), and the left value of the middle column (.colright).

For example, try the following changes:

.colright { left: 300px; }

.col2 { right: 250px; }

This changes the sidebar's width, but not its text width (thus the text appears to have a larger margin).