HTML CSS examples for CSS Widget:Footer Column
Footer, header and two columns in the middle
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> html,body,.container { position:relative; height:100%; } #sidebar {<!-- w w w . j a v a 2 s. com--> position:absolute; padding:0.6%; top:0; bottom:0; left:0; width:21%; margin-left:2.6%; margin-top:8%; margin-bottom:7.6%; background:Chartreuse; } #header { border:2px solid yellow; width:100%; height:11%; margin:0 0 6px 0; } #content { border:2px solid blue; width:78%; height:81%; position:absolute; margin-left:24%; } #footer { border:2px solid pink; width:100%; height:11%; margin-top:81%; } </style> </head> <body> <div class="container"> <div id="sidebar"> Lorem ipsum dolor sit amet, consec <br> <br>Lorem ipsum dol <select name="gender"> <option value="">Lorem </option> <option value="male">Lore</option> <option value="female">Lorem </option> </select> <hr> <label for="amount">Lorem ipsu</label> <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> <div id="slider-range"></div> </div> <div id="header"> <h1>Lorem ipsum dolor sit amet, co</h1> </div> <div id="content"> Lorem ipsum dolor sit am </div> <div id="footer"> Lorem ipsum dolor sit amet, consec </div> </div> </body> </html>