*{margin:0;padding:o;}
#box{margin:50px auto;width:800px;height:800px;border: 2px solid black}
header{width:100%;height:100px;background:cyan;}
#content{width:100%;height:600px;}
footer{width:100%;height:100px;background:green;}

/**   layout 1    **/
#layout #header-left{width:50%;height:100px;background:grey;float:left;}
#layout #header-right{width:50%;height:100px;background:olive;float:left;}
#layout #content-left{width:33.3%;height:600px;background:green;float:left;}
#layout #content-middle{width:33.3%;height:600px;background:red;float:left;}
#layout #content-right{width:33.3%;height:600px;background:cyan;float:left;}
#layout #footer-left{width:50%;height:100px;background:blue;float:left;}
#layout #footer-right{width:50%;height:100px;background:olive;float:left;}

/**   layout 2    **/
/**   layout 3    **/