HTML CSS examples for CSS Widget:Footer Column
Three column layout with header and footer inside a container
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .Window {<!-- w ww. j a va2 s . co m--> width:601px; height:501px; background-color:Chartreuse; } .Window-Top { height:51px; width:100%; background-color:yellow; background-image:-webkit-linear-gradient(bottom, blue 26%, rgb(209,209,209) 79%); background-image:-moz-linear-gradient(bottom, pink 26%, rgb(209,209,209) 79%); background-image:-o-linear-gradient(bottom, OrangeRed 26%, rgb(209,209,209) 79%); background-image:-ms-linear-gradient(bottom, grey 26%, rgb(209,209,209) 79%); } .Window-Content { height:401px; } .Window-Content-Left { width:151px; height:100%; background-color:BlueViolet; float:left; } .Window-Content-Content { height:100%; width:301px; background-color:Chartreuse; float:left; } .Window-Content-Right { width:151px; height:100%; background-color:yellow; float:left; } .Window-Bottom { height:51px; width:100%; background-color:blue; } .clear { clear:both; } </style> </head> <body> <div class="Window"> <div class="Window-Top"> Lorem ipsum </div> <div class="Window-Content"> <div class="Window-Content-Left"> Lorem ipsum dolor sit </div> <div class="Window-Content-Content"> Lorem ipsum dolor sit am </div> <div class="Window-Content-Right"> Lorem ipsum dolor sit </div> <div class="clear"></div> </div> <div class="Window-Bottom"> Lorem ipsum dol </div> </div> </body> </html>