Question

I have been sitting for a while to come up with a solution to a problem. I want to make a website that consists of three columns (left, center, right). These three will together cover the entire screen width. One column will consist of a fixed pixel value and the other two columns should be as wide that the middle column is centered on the screen.

The reason I need the left and right columns is because I want to hide things behind them, and then animate these things into the center column.

Anyone have a solution?

Answer 1

I’m not happy about the width: 10000% bit on this, maybe someone can come up with a cleaner solution but I think this will do what you’re describing. These kinds of layouts are a little tricky when you’re looking for a pure CSS solution.

HTML:

<div id="content">
<p>Content goes in here</p>
<ul>
    <li>Whatever</li>
    <li>Kind</li>
    <li>Of</li>
    <li>Content</li>
</ul>        
<div class="sideCol" id="left"></div>
<div class="sideCol" id="right"></div>

​

CSS:

#content
{
    width: 200px;
    margin: 0 auto;
    position: relative;
}

.sideCol
{
    width: 10000%;
    height: 100%;
    position: absolute;
}

#left
{
    background-color: red;
    right: 200px;
    top: 0;
}

#right
{
    background-color: blue;
    top: 0;
    left: 200px;
}​

http://jsfiddle.net/fLH9T/