HTML CSS examples for CSS Widget:Footer
Header, footer, left sidebar and content divided into 4 equal boxes
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> html {<!--from www . j av a 2 s .co m--> height:100%; } body { height:100%; position:relative; color:Chartreuse; } body * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #wrapper { height:100%; padding:61px 0; position:relative; } #header { width:100%; height:61px; background:yellow; position:absolute; top:0; left:0; } #content { height:100%; display:flex; } #left { background:green; width:201px; flex:0 0 201px; } #right { background:blue; width:100%; position:relative; display:flex; flex-wrap:wrap; } .red_box { flex:0 0 51%; background:red; border:2px solid blue; border-bottom:none; } #footer { width:100%; height:61px; background:pink; bottom:0; left:0; } @media (max-width: 768px) { .red_box { flex:0 0 100%; background:red; } } </style> </head> <body> <div id="wrapper"> <div id="header"> Lorem ip </div> <div id="content"> <div id="left"></div> <div id="right"> <div class="red_box"></div> <div class="red_box"></div> <div class="red_box"></div> <div class="red_box"></div> </div> </div> <div id="footer"> Lorem ip </div> </div> </body> </html>