JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="container"><!-- Start container -->
<div id="pageHeader"><!-- Start page header -->
<div id="widthControl">
<div id="logo">%logo%</div>
<h1>%site_title%</h1>
<h2>%site_slogan%</h2>
<div id="navcontainer"><!-- Start Navigation -->
%toolbar%
</div><!-- End navigation -->
</div><!-- End Width Controler -->
</div><!-- End page header -->
<div id="belowheader">
<div id="contentContainer"><!-- Start main content wrapper -->
<div id="content"><!-- Start content -->
%content%
</div><!-- End content -->
</div><!-- End main content wrapper -->
<div id="sidebarContainer"><!-- Start Sidebar wrapper -->
<div class="sideHeader">%sidebar_title%</div><!-- Sidebar header -->
<div id="sidebar"><!-- Start sidebar content -->
%sidebar%<!-- sidebar content you enter in the page inspector -->
%plugin_sidebar% <!-- sidebar content such as the blog archive links -->
</div><!-- End sidebar content -->
</div><!-- End sidebar wrapper -->
</div><!-- End Below Header -->
<div class="clearer"></div>
<div id="footer"><!-- Start Footer -->
<div id="footerWidth">
<div id="breadcrumbcontainer"><!-- Start the breadcrumb wrapper -->
%breadcrumb%
</div><!-- End breadcrumb -->
<p>%footer%</p>
</div><!--End Below Header -->
</div><!-- End Footer -->
</div><!-- End container -->
</body>
CSS
body {
width:960px;
margin-left: auto;
margin-right: auto;
}
#pageHeader {
position: fixed;
width: 100%;
height: auto;
top: 0px;
left: 0px;
background: #008da3;
z-index: 99999;
}
#pageHeader h1 {
color: white;
margin: 10px 0 -5px 0;
text-align: center;
padding-right: 100px;
font-size: 50px;
}
#pageHeader h2 {
color: white;
text-align: center;
margin: 10px 0 -12px 0;
font-size: 25px;
}
#belowheader {
padding-top: 140px;
text-align: center;
}