HTML CSS examples for CSS Widget:UL
Full covering page
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!--from ww w . ja v a 2 s . c o m--> overflow-y:scroll; border:none; padding:0; margin:0; height:100%; width:100%; } #container { border:none; padding:0; margin:0; height:100%; width:100%; background:none; position:absolute; float:left; } img { position:static; float:left; height:100%; margin:0; padding:0; width:auto; } #leftcontainer { position:fixed; float:left; height:100vh; width:21vh; padding:0; background:none; margin:0; overflow:hidden; border:none; } #rightcontainer { position:absolute; float:left; height:100%; width:calc(100% - 21vh); margin:0; margin-left:21vh; padding:0; padding-bottom:-11%; background:pink; } #article { positon:absolute; float:left; width:51%; margin:0; padding:0; background-color:Chartreuse; } #blog { position:absolute; float:left; width:51% margin: 0; padding:0; background-color:yellow; margin-left:51%; } #footer { position:relative; height:11%; background-color:blue; width:calc(100% - 21vh); margin-top:100%; margin-bottom:0; margin-left:21vh; padding:0; } </style> </head> <body> <div id="container"> <div id="leftcontainer"> </div> <div id="rightcontainer"> <div id="article"></div> <div id="blog"></div> </div> <div id="footer"></div> </div> </body> </html>