JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner"></div>
</div>
<div class="wire-unit hero-fix">
<img class="wire-logo" src="http://joshuawalker.koding.com/wp-content/uploads/2012/11/wire-logo.png" />
</div>
<div class="sidebar hidden-phone"></div>
<div class="content"></div>
</body>
</html>
CSS
@import url("http://twitter.github.com/bootstrap/assets/css/bootstrap.css");
@import url("http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css");
html, body {
height: 100%;
}
.wire-unit {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
width: auto;
background-color: #B31525;
background-image: url('http://joshuawalker.koding.com/wp-content/uploads/2012/11/wire-hero.png');
}
@media (max-width: 767px) {
.hero-fix {
margin-left: -20px;
margin-right: -20px
}
}
.sidebar {
position: absolute;
top: 112px;
background-color:#E6E6E6;
left: 0;
right: 80%;
padding-left: 9px;
padding-right: 9px;
padding-top: 9px;
min-height: 100%;
-moz-box-shadow: inset -5px 0 5px -2px #D6D6D6;
-webkit-box-shadow: inset -5px 0 5px -2px #D6D6D6;
box-shadow: inset -5px 0 5px -2px #D6D6D6;
border-right: 1px solid #D6D6D6;
min-height:100%;
}
@media (max-width: 480px) {
.content {
position: absolute;
top: 112px;
background-color:#FFFFFF;
width:100%;
height: 100%;
}
}
@media (min-width: 767px) {
.content {
position: absolute;
top: 112px;
background-color:#FFFFFF;
left: 20%;
right: 0;
height: 100%;
}
}
.content p {
padding-left: 9px;
}