3 колонки с фиксированным левым и правым столбцом.Правый столбец перетекает в центральный столбец на меньших экранах

Question

Настройка HTML

<div id="fixed-wrapper">
<div id="header">
        <h1>Site Name</h1>
</div>
<div id="leftCol"></div>
<div id="centerCol"></div>
<div id="rightCol"></div>

CSS:

#fixed-wrapper{
    min-width: 1264px;
}
#header{
    width: 100%;
    height: 75px;   
    text-align: center;
}
#header h1 
{
    line-height: 75px;   
}
 #centerCol {
    margin-left: 310px;
    margin-right: 360px;
    height: 100%;
    min-width: 604px;
}
#rightCol {
    width: 285px;
    height: auto;
    position: absolute;
    top: 75px;
    right: 0;
    margin-right: 75px;
}
#leftCol {
    width: 235px;
    height: auto;
    position: absolute;
    top: 75px;
    left: 0;
    margin-left: 75px; 
}

Проблема в том, что центральный столбец должен иметь минимальную ширину, но правый столбец не должен перемещаться в центральный столбец.

Answer 1

Попробуйте установить ширину центрального столбца как auto, а не определять его минимальную ширину,

 #centerCol {
    margin-left: 310px;
    margin-right: 360px;
    height: 100%;
    width: auto;
}

Answer 2

Сделать # fixed-wrapper позиционированным относительно, так что #leftCol и #rightCol позиционируются абсолютно по отношению к нему, а не к телу документа.

#fixed-wrapper{
    min-width: 1264px;
    position: relative;
}

пример jsFiddle