I have a three column div layout with a container div around it all. Center DIV is fixed width 1000px. Left and right DIVs have a 200px wide background image that I want to fluctuate from 0-200px with the page width when the viewer resizes the browser/is on a resolution higher than 1000px, more than 1400px and the body color takes over, less and I want the center DIV to stay centered, with the left and right DIV columns to automatically resize. I want to keep this compatible with 1024 but give the 1280+ viewers the eye candy. :D


This should be easy, but I think it's because the container DIV has to be 1400px wide. I've been all over min and max-width, overflow, but can't seem to find the sweet spot. The code below gives me what I want, minus the automatic resize of the left and right DIVs.


body {
margin:0;
background-color:#081e49;
}

#container {
width:1400px;
margin:0;
overflow:auto;
}

#center {
width:1000px;
height:970px;
background-image:url(images/center.png);
background-repeat:no-repeat;
background-position:center;
float:left;
}

#left {
width:200px;
height:970px;
float:left;
background-image:url(images/left.png);
background-repeat:no-repeat;
background-position:right;
}

#right {
width:200px;
height:970px;
float:left;
background-image:url(images/right.png);
background-repeat:no-repeat;
background-repeat:left;
}

-----------------

<div align="center" id="container">
<div id="left"></div>
<div align="center" id="center"></div>
<div id="right"></div>
</div>

I'll be playing with this and post if I make progress. I want the left and right DIVs to flow from 0-200px, or the container DIV centered with overflow hidden, but without cutting the entire image, just the part that "overflows".

Should I take the left and right out of the container?

I scraped it and went with a body background using a jpeg. =p

I might try this again, I've made DIV columns before, with auto width's, but I was trying to add an image to the DIV, that would flow with the DIV width, and when it got smaller than the image, the image would overflow:hidden without cutting off the entire image that was still viewable.