Three columns layout

Резиновый макет сайдбары фиксированной ширины тут же тест на корректность

by ivangalin

HTML

<div>Show:
    <label><input type="checkbox" id="chLeft" checked/>left</label>
    <label><input type="checkbox" id="chCenter" checked disabled/>center</label>
    <label><input type="checkbox" id="chRight" />right</label>
    <span id="modeout" style='margin-left:10em'></span>
    <input type='button' id='nexttest' value='next' />
</div>
<div id="header">HEAD</div>
<div id="wrapper">
    <div id="center"><div id="content">CENTER<br/>CENTER<br/></div></div>
    <div id="left">LEFT<br/>LEFT<br/>LEFT<br/>LEFT<br/></div>
    <div id="right">RIGHT<br/>RIGHT<br/>RIGHT<br/></div>
</div>
<div id="footer">FOOT</div>

CSS

body{width:600px; margin: 0 auto;}
#left  {background: red;  width:100px; float:left; position: relative;}
#center{background: lime; width:100%;  float:left; position: relative;}
#right {background: blue; width:100px; float:left; position: relative;}
#content{border: 5px solid yellow;}
#header, #footer{ margin-left: 100px;border: 1px solid magenta;}
#wrapper, #wrap_both, #wrap_right, #wrap_center, #wrap_left{ position: relative; overflow:hidden;}

#wrap_both        { padding-left: 200px; padding-right: 100px; }
#wrap_both #center{  }
#wrap_both #left  { margin-left: -100%; right: 100px; }
#wrap_both #right { margin-right: -100%; }

#wrap_left        { padding-left: 200px;  }
#wrap_left #center{  }
#wrap_left #left  { margin-left: -100%; right: 100px; }
#wrap_left #right { display:none;}

#wrap_center        { padding-left: 100px; }
#wrap_center #center{  }
#wrap_center #left  { display:none;}
#wrap_center #right { display:none;}

#wrap_right        { padding-left: 100px; padding-right: 100px; }
#wrap_right #center{  }
#wrap_right #right { margin-right: -100%;   }
#wrap_right #left  { display:none;}

JavaScript

function getMode() {
    var mode = [ 
        +$('input[type=checkbox]#chLeft').prop('checked'),
        +$('input[type=checkbox]#chRight').prop('checked')
    ].join('');
    switch(mode){
        case '11': mode = 'both'; break;
        case '01': mode = 'right'; break;
        case '10': mode = 'left'; break;
        case '00': mode = 'center'; break;
    }

    $('span#modeout').html('mode: '+mode);
    return mode;
}
var wrapper = $('div#wrapper');
function reorder() {
    wrapper.attr('id', 'wrap_' + getMode());
}

reorder();
$('input[type=checkbox]').click( reorder );


var sp = 0;
var ss = [[1, 2, 3], [2, 1, 3], [1, 3, 2], [2, 3, 1], [3, 1, 2], [3, 2, 1]];
var vv = ['LEFT<br/>', 'CENTER<br/>', 'RIGHT<br/>'];

function pc() {
    var out = '';
    for (var i = 1; i <= ss[sp][0]; i++) out += vv[0];
    $('#left').html(out);
    out='';
    for (var i = 1; i <= ss[sp][1]; i++) out += vv[1];
    $('#center').html(out);
    out='';
    for (var i = 1; i <= ss[sp][2]; i++) out += vv[2];
    $('#right').html(out);
}
$('#nexttest').click(function(){ sp = (sp+1)%6; pc();} );
pc();