2-column layout with fixed content width, unlimited background width

Question

I am trying to implement a layout for a website. This is actually a simple two-column layout, where each column has its own background color. The content, however, has a fixed width and should be centered. The breakpoint is a background that should not be limited by the width of the content.

To illustrate the situation, I also took a picture:

I already had the idea of ​​using a centered background image that I could tiled vertically, but this solution will make the maximum width of the website depending on the width of the image.

Do you think there is a better solution?

Thanks in advance David

Answer 1

bg, 960 , 640px - , 320px .

, bg , , 1024px . CSS:

.wrapper {
    background:url("my image here") 0 0 repeat-y;
}

, col CSS:

col1 { background-color:#fff; }
col2 { background-color:#ccc; }

HTML:

<div class="wrapper">
    <div class="content">
        <div class="col1">
        </div>
        <div class="col2">
        </div>
    </div>
</div>

CSS:

// This will create a wrapper across the entire page.
.wrapper {
    margin:0 auto;
    width:100%;
}

// This is your centered column
.content {
    float:left;
    width:960px;
}

// This is your first column
.col1 {
    background: **your background goes here
    float:left;
    width:640px;
}

// This is your second column
.col2 {
    background: **your background goes here
    float:left;
    width:320px;
}

, bg , , 1024px .

Answer 2

YUI , , , , . http://developer.yahoo.com/yui/grids/