Question

#left-side-outer {
    width:50%;
    float:left;
    margin-right:-400px;

}
#left-side{
    margin-right:400px;
    background-color: #FF9900;
    background: transparent url('../images/grass_pattern.png') repeat-x bottom !important;
    height: 82px;
}

#right-side-outer {
    width:50%;
    float:right;
    margin-left:-401px;
    height: 82px;
}
#right-side {
    margin-left:400px;
    height: 82px;
    background-color: #FF9900;
    background: transparent url('../images/grass_pattern_red.png') repeat-x bottom !important;
    background: none;
}

#center-column {
    width:800px;
    height: 82px;
    float:left;
    color: #FFFFFF;
    background-color: #000000;
    position:relative;
    z-index:10;
    background: transparent url('../images/grass_pattern.png') repeat-x bottom !important;
    background: none;

}

My html:

 <div id="left-side-outer">
            <div id="left-side">
            </div>
        </div>
        <div id="center-column">adsfadsfadfs</div>

        <div id="right-side-outer">
            <div id="right-side">
            </div>
        </div>

How do I make this work the if the width of the centre column is 1000 pixels?

Answer 1

Change all -400 to -500, all 400 to 500, and 401 to 501.