*{margin:0px;padding:0px;}
#wrapper{width:800px;height:800px;background:yellow;border:2px solid blue;}
.top-bar{width:100%;height:50px;}

/** Layout 1  **/
#layout #top-bar-left{width:50%;height:50px;background:cyan;float:left;}
#layout #top-bar-right{width:50%;height:50px;background:blue;float:left;}
#top-bar-right ul li{background:white;border-radius:50%;color:#5F5F5F;float:right;margin:6px;list-style:none;}

header{width:100%;height:100px;background:green;}


/** Layout 2  **/
#layout #header-left{width:50%;height:70px;background:orange;float:left;}
#layout #header-right{width:50%;height:70px;background:pink;float:left;}
#layout #header-bottom{width:100%;height:30px;background:#eee;float:left;}

#header-bottom ul li{background:white;float:left;margin:6px;list-style:none;}
#content{width:100%;height:590px;}
footer{width:100%;height:60px;background:olive;}