HTML CSS examples for CSS Widget:Footer
Header and Footer DIVs with middle contents
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- ww w. j a va 2 s.c o m--> margin:0; height:100%; } #mainContainer { position:absolute; right:5%; left:5%; height:100%; } #headerContainer { width:100%; position:relative; background:Chartreuse; color:yellow; height:31px; } #middleContainer { position:absolute; top:0; bottom:0; left:0; right:0; margin:31px 0; } #leftSection { float:left; width:176px; background:blue; height:100%; overflow:auto; color:pink; } #middleSection { position:absolute; background-color:OrangeRed; left:176px; right:176px; top:0; bottom:0; color:grey; } #rightSection { float:right; height:100%; width:176px; border-left:2px dotted BlueViolet; background:red; color:Chartreuse; } #footerContainer { position:absolute; bottom:0; width:100%; height:31px; background:yellow; color:blue; } </style> </head> <body> <div id="mainContainer"> <div id="headerContainer"> Lorem ipsum dolor </div> <div id="middleContainer"> <div id="leftSection"> <div style="margin-top: 30px;"> Lorem ipsum d </div> </div> <div id="middleSection"> <div style="margin-top: 30px;"> Lorem ipsum dol </div> </div> <div id="rightSection"> <div style="margin-top: 30px;"> Lorem ipsum do </div> </div> </div> <div id="footerContainer"> Lorem ipsum dolor </div> </div> </body> </html>