CSS Percentage And Pixel Layout Combined

I'm really struggling with this, if anyone could help my eternal thanks goes out to you. I have a CSS DIV with a width of 1260px called wrapper: #wrapper { width: 1260px; } Inside

Solution 1:

Why not try this approach: http://jsfiddle.net/Er8uX/2/

#wrapper {
    width: 1260px;
    border: 1px solid #ddd;
    overflow: hidden;
    position: relative;
}
#column-left {
    width: 245px;
    position: absolute;
    left: 0;
    border: 1px solid #f0f;
}

#column-mid {
    margin: 0 280px;
    border: 1px solid #00f;
}

#column-right {
    width: 245px;
    border: 1px solid #f0f;
    position: absolute;
    height: 100%;
    right: 0;
}

I think this is what you want, basically: fixed left and right column, main content according to wrapper width. I've used absolute positioning to keep them in place; on the right one I've used 100% height if you have a column with a background and want it to run all the way down, the left one has height according to content.

Solution 2:

It is happening because you are not changing width of #column-left and #column-right according to whole width and just changing width of #column-mid.

For the case where width of #column-left and #column-right to remain 245px and width of #column-mid to be responsive,

try this:

#column-mid {
    width: calc(100% - 560px); //245px for #column-left, 245px for #column-right and 70px for margin
}

Another solution:

Try:

#wrapper {
    display:table;
}
#column-left,#column-mid,#column-right{
    display:table-cell;
}
#column-left,#column-right{
    width: 245px;background:#f7f7f7;
}
#column-mid {
    background:#ccc;
    padding:0 35px;//for spacing
}

Here is the fiddle.