JSFiddle - React, Tailwind, and code Playground
HTML
<section>
<div class='post'>
<div class='post-title>'> Title fo post 1</div>
<div class='post-subtitle'>
<div class='added-by'>BY <SPAN class='blue'>MARK XXXX</SPAN></div>
<div class='added-at'>10:10:00 12/12/2014</div>
</div>
<div class='post-body'>
<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 </p>
</div>
</div>
<div class='post'>
<div class='post-title>'> Title fo post 1</div>
<div class='post-subtitle'>
<div class='added-by'>BY <SPAN class='blue'>MARK XXXX</SPAN></div>
<div class='added-at'>10:10:00 12/12/2014</div>
</div>
<div class='post-body'>
<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 </p>
</div>
</div>
</section>
<aside>
LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU!
LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU! LEFT MENU!
</aside>
<footer>
<div style="float: left"> Copyrigth TaxHug All Rights Reserved</div>
<div style="float: right"> About Terms Privacy </div>
</footer>
CSS
.page{
/* center horizontally */
margin-left: auto;
margin-right: auto;
/* center horizontally */
outline: 1px solid black;
width: 960px;
}
.blue {
color: blue;
}
.added-by {
float: left;
font-size: 10px;
}
.added-at {
float: right;
font-size: 10px;
}
.post {
//background-color: yellow;
}
.post-subtitle{
//padding: 0 10px;
}
section
{
padding: 10px;
width: 800px;
display: block;
//background-color: red;
float: left;
box-sizing: border-box;
}
aside
{
padding: 10px;
display: block;
float: right;
max-width: 150px;
background-color: yellow;
box-sizing: border-box;
}
footer {
padding: 10px;
background-color: red;
//box-sizing: border-box;
clear: both;
}
/* fix for old browsers */
article, aside, figcaption, figure, footer, header, hgroup, nav, section
{
display: block;
}