Question

I’m trying to implement a layout for a website. Actually it is a simple 2-column layout where each column has its own background color. The content, however has a fixed width and it should be centered. The breaking point is the background, which should not be limited by the content width.

To illustrate the situation I have also made a picture:

I already had the idea to use a centered background image that I could tile vertically, but this solution would make the website’s maximum width dependent on the width of the image.

What do you think, is there a better solution?

Thanks in advance
David

Answer 1

If you want to use an image as you bg, then the image should span a minimum of 960px, the first 640px being one colour and the right 320px should be the other colour.

If you want the bg to span the entire site, then you have to create a background large enough to span the first 1024px with the above column dimensions I mentioned. Add this to your CSS:

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

If you want to use colours only, just set the following attributes for each col class in the CSS:

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

Assuming the following HTML structure:

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

Try the following 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;
}

If you want the bg to span the entire site, then you have to create a background large enough to span the first 1024px with the above column dimensions I mentioned.