Page Layout

by Bhesh Gurung

HTML

<div class="topbar-section">
	<div class="section-content topbar-section-content">
	topbar
	</div>
</div>
<div class="header-section">
	<div class="section-content header-section-content">
	HEADER
	</div>
</div>
<div class="body-section">
	<div class="section-content body-section-content">
	<p>body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body</p>
    <p>body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body</p>
	<p>body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body</p>
    <p>body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body</p>
	</div>
</div>
<div class="footer-section">
	<div class="section-content footer-section-content">
	footer
	</div>
</div>

CSS

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
	padding: 0;
	margin: 0;
	font-family: Lucida Console,Lucida Sans Typewriter,monaco,Bitstream Vera Sans Mono,monospace;
}

body {
	background-color: #003863;
}

.section-content {
	width: 980px;
	margin: 0 auto;
	background-color: #fff;
}

.topbar-section {
	background-color: #990000;
}

.topbar-section-content {
	background-color: #990000;
	color: #ccc;
	height: 30px;
	line-height: 30px;
	padding-left: 10px;
	padding-right: 10px;
}

.header-section {
	background-color: #fff;
}

.header-section-content {
	height: 96px;
	line-height: 96px;
	padding: 10px;
	border-bottom: 1px solid #990000;
}

.body-section {
	background-color: #fff;
}

.body-section-content {
	padding: 10px;
}

.footer-section {

}

.footer-section-content {
	background-color: #003863;
	color: #aaa;
	padding: 10px;
}