"Simple HTML,CSS weblayout page"
Bootstrap 4.1.1 Snippet by duvvurisandeep

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <style> /* please copy CSS here */ </style> </head> <body> <h1>Simple HTML,CSS weblayout page</h1> <h4>Modify code as your system(computer) length & width</h4> <div id="page"> <div id="header">Header Page</div> <div id="sidebar-left"> Sidebar Page<br><br> <a href="">Link1</a><br><br> <a href="">Link2</a><br><br> <a href="">Link3</a><br><br> </div> <div id="main">Main Page</div> <div id="footer">Footer Page</div> </div> </body> </html>
#page { border:2px solid black; width:100%; margin:0 auto; text-align:left; } #header{ border:1px solid black; background-color: aqua; width:100%; height:50px; text-align: center; } #sidebar-left{ border:1px solid black; float:left; width:8%; text-align: center; background-color: lightyellow; } #main{ float:left; width:91.3%; text-align: center; background-color: white; } #footer{ border:1px solid black; clear:both; height: 50px; width: 100%; text-align: center; background-color: aqua; } #sidebar-left, #main{ min-height: 600px }

Related: See More

Rotating CSS Card
Simple & Clean 404 Error Page style
Simple & Clean 404 Error Page Design
Simple Vertical timeline

Questions / Comments: