https://www.otallu.com/tutorials/create-basic-website-layout-with-html-css/
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo Layout</title>
<link rel="stylesheet" type="text/css" href="/LayOuts/DemoLayout.css">
</head>
<body>
<div class="wrap">
<div class="header">
HEADER
</div>
<div class="content">
CONTENT
</div>
<div class="sidebar">
SIDEBAR
</div>
<div class="clear">
</div>
<div class="footer">
FOOTER
</div>
</div>
</body>
</html>
/*
https://www.otallu.com/tutorials/create-basic-website-layout-with-html-css/ */
/* Just resetting the default margin and padding of the body. */
body{
margin: 0;
padding: 0;
}
.wrap{
width: 980px;
height: 700px;
/* a width of 980 pixel wide and added top/bottom margin as 0 and right /left
margin as auto. That auto margin on both sides makes our website centered aligned
horizontally. */
margin: 0 auto;
background-color:orange;
}
.header{
height: 140px;
margin-bottom: 15px;
background-color: #32a852;
}
.content{
width: 690px;
height: 450px;
background-color: #32a852;
float: left;
}
.sidebar{
width: 275px;
height: 450px;
background-color: #32a852;
float: right;
}
/* We added float property to make this DIVs floats. That way we can make these DIVs
stand beside each other. Without float property, DIV would take the whole width of
the page and new “.sidebar” DIV would start under “.content” DIV. You can swap the
values of float to change the position of the sidebar to either on the left or right
side. */
/* we used clear DIV which will probably be as it is in all other designs without any
text or content in it.
The purpose of this DIV is to clear the space for floating elements above otherwise
footer DIV would ignore floating DIVs above and would snap to header DIV. */
.clear{
clear: both;
}
.footer{
height: 120px;
margin-top: 15px;
background-color: #32a852;
}
Comments
Post a Comment