Skip to content

Instantly share code, notes, and snippets.

@stephensmitchell
Forked from AdamAlinauskas/layout.htm
Created January 30, 2020 05:27
Show Gist options
  • Select an option

  • Save stephensmitchell/1c6ea40b182f1398a97ad619786f2874 to your computer and use it in GitHub Desktop.

Select an option

Save stephensmitchell/1c6ea40b182f1398a97ad619786f2874 to your computer and use it in GitHub Desktop.
Web page layout using divs with a header, footer, right sidebar, left sidebar and an area for main content.
<html>
<head>
<style>
#header{
background-color: lightblue;
width:100%;
height:50px;
text-align: center;
}
#sidebar-left{
float:left;
width:15%;
background-color: red;
}
#main{
float:left;
width:70%;
background-color: lightgray;
}
#sidebar-right{
float:left;
width:15%;
background-color: red;
}
#footer{
clear:both;
height: 50px;
width: 100%;
text-align: center;
background-color: lightblue;
}
#sidebar-left, #main, #sidebar-right{
min-height: 600px
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="sidebar-left">Left</div>
<div id="main">Main</div>
<div id="sidebar-right">Right</div>
<div id="footer">Footer</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment