Three columns layout

Резиновый макет все колонки заданы в процентах

by ivangalin

HTML

<div>
    <input type="checkbox" id="chLeft" />
    <input type="checkbox" id="chCenter" checked/>
    <input type="checkbox" id="chRight" />
    <span id="modeout"></span>
</div>
<div id="ruler"><div></div><div></div><div></div><div></div><div></div></div>
<div id="header">HEAD</div>
<div id="wrapper">
    <div id="rrr">
        <div id="center">CENTER<br/>CENTER<br/>CENTER<br/></div>
        <div id="right">RIGHT<br/>RIGHT<br/>RIGHT<br/>RIGHT<br/></div>
    </div>
    <div id="left">LEFT<br/>LEFT<br/>LEFT<br/>LEFT<br/>LEFT<br/></div>
    <div style="clear:both"></div>
</div>
<div id="footer">FOOT</div>

CSS

#ruler div {width:20%;height:10px;display:inline-block;}
#ruler div:nth-child(1) {background:red;}
#ruler div:nth-child(2) {background:lime;}
#ruler div:nth-child(3) {background:blue;}
#ruler div:nth-child(4) {background:yellow;}
#ruler div:nth-child(5) {background:magenta;}
#left  {background: red;width:20%;}
#center{background: lime;width:60%;}
#right {background: blue;width:20%;}
/* #rrr{border: 5px solid yellow;}
*/
#footer{ border: 1px dotted magenta;}
#header{ border: 1px dotted magenta;}

#wrap_both #rrr   { float:right; width:80%; }
#wrap_both #center{ float:left;  width:75%; }
#wrap_both #right { float:right; width:25%; }
#wrap_both #left  {              width:20%; }

#wrap_right #rrr   { float:right; width:100%; }
#wrap_right #center{ float:left;  width:80%;  }
#wrap_right #right { float:right; width:20%   }
#wrap_right #left  { display:none;}

#wrap_center #rrr   { width:100%; }
#wrap_center #center{ width:100%; }
#wrap_center #left  { display:none;}
#wrap_center #right { display:none;}

#wrap_left #rrr   { float:right; width:80%; }
#wrap_left #center{              width:100%;  }
#wrap_left #right { display:none;}
#wrap_left #left  {              width:20%;  }

JavaScript

var chLeft = $('input[type=checkbox]#chLeft');
var chCenter = $('input[type=checkbox]#chCenter');
var chRight = $('input[type=checkbox]#chRight');

function getMode(){
    var chLeft = $('input[type=checkbox]#chLeft').prop('checked');
    var chCenter = $('input[type=checkbox]#chCenter').prop('checked');
    var chRight = $('input[type=checkbox]#chRight').prop('checked');
    var mode = 'UNKNOWN';
    if( chLeft && chRight ) mode = 'both';
    else if( !chLeft && chRight ) mode = 'right';
    else if( chLeft && !chRight ) mode = 'left';
    else if( !chLeft && !chRight ) mode = 'center';
    
    $('span#modeout').html(mode);
    return mode;          
}
var mode = getMode();
var wrapper = $('div#wrapper');
wrapper.prop('id', 'wrap_'+mode );
$('input[type=checkbox]').click(function(){
    mode = getMode();
    wrapper.prop('id', 'wrap_'+mode );
});