JSFiddle - React, Tailwind, and code Playground
HTML
<div id="navigation" class="clearfix">
...
</div> <!-- /#navigation -->
<div id="header-wrapper">
<div id="header" class="clearfix<?php if ($page['header']): ?> with-blocks<?php endif; ?>">
<div id="branding" class="clearfix">
...
</div> <!-- /#branding -->
</div> <!-- /#header -->
</div> <!-- /#header-wrapper -->
<div id="main-columns-wrapper">
<div id="main-columns" class="clearfix">
<div id="main">
<div id="page" class="clearfix">
</div> <!-- /#page -->
<div id="footer">
...
</div> <!-- /#footer -->
</div> <!-- /#main -->
<div id="sidebar-first" class="clearfix">
...
</div> <!-- /#sidebar-first -->
<div id="sidebar-second" class="clearfix">
...
</div> <!-- /#sidebar-second -->
</div> <!-- /#main-columns -->
</div> <!-- /#main-columns-wrapper -->
CSS
/**
* Layout
*/
#main,
#sidebar-first,
#sidebar-second {
float: left; /* LTR */
}
/* Layout width */
#navigation ul,
#header,
#main-columns {
margin: 0 auto;
width: 85%;
min-width: 960px;
max-width: 1200px;
}
/* Column width */
body.two-sidebars #main {
width: 56%;
}
body.two-sidebars #sidebar-first,
body.two-sidebars #sidebar-second {
width: 21.9%;
}
body.one-sidebar #main {
width: 70%;
}
body.one-sidebar #sidebar-first,
body.one-sidebar #sidebar-second {
width: 29.7%;
}
body.no-sidebars #main {
width: 100%;
}
/* Spacing between columns */
#sidebar-first .region,
#sidebar-second .region {
margin: 0 0 0 20px; /* LTR */
}
/* Prevent collision with browser chrome */
#navigation ul,
#header,
#main-columns {
padding: 0 15px;
}
/* Mobile */
@media only screen and (max-device-width: 480px) {
#navigation ul,
#header,
#main-columns {
width: 100%!important;
}
}
/* RTL stylesheet */
#main,
#sidebar-first,
#sidebar-second {
float: right;
}
#sidebar-first .region,
#sidebar-second .region {
margin: 0 20px 0 0;
}
/* IE6 stylesheet */
#navigation ul,
#header,
#main-columns {
width: 960px;
}