Skip to content

Instantly share code, notes, and snippets.

@afraser
Created Jul 20, 2012
Embed
What would you like to do?
Boundless Plus v2 layout - Hodgie
/* Boundless Plus v2 layout - Hodgie */
html {
height: 100%;
max-height: 100%;
}
body {
margin: 0;
background-color: #333;
height: 100%;
max-height: 100%;
}
#wrapper {
width: 1024px;
height: 100%;
max-height: 100%;
margin: 0 auto;
position: relative;
}
header{
height: 100%;
max-height: 100%;
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
width: 150px;
color: white;
}
.bottom{
position: absolute;
bottom: 0px;
left: 0px;
}
.content {
position: absolute;
left: 150px;
right: 0px;
top: 0px;
bottom: 0px;
height: 100%;
max-height: 100%;
transition-property: left;
transition-duration: .5s;
transition-easing: ease-in-out;
}
.tray{
position: absolute;
height: 100%;
min-height: 100%;
width: 82px;
left: -82px;
top: 0px;
bottom: 0px;
box-shadow: -8px 0 8px rgba(0,0,0,0.2);
background-color: #666;
color: white;
transition-property: left;
transition-duration: 0.3s;
transition-easing: ease-in-out;
}
.sections {
background-color: #f0f0f0;
width: 250px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
.text {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: white;
overflow-y: scroll;
}
.innercontent {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
box-shadow: 0 0 20px rgba(0,0,0,1);
background: #FDFDFD;
z-index: 10;
min-height: 100%;
}
.innercontent .footer {
width: 100%;
height: 30px;
position: relative;
background: #EEE;
bottom: 0;
}
@media screen and (min-width: 1280px) {
#wrapper {
width: 1280px;
}
.text {
left: 250px;
box-shadow: -4px 0 4px rgba(0,0,0,0.2);
}
}
/*for demonstration
.content:hover .tray{
left: 160px;
}*/
<div id="wrapper">
<header>
<div>top</div>
<div class="bottom">bottom</div>
</header>
<div class="content">
<div class="tray">
<div>top</div>
<div class="bottom">bottom</div>
</div>
<div class="innercontent">
<div class="sections"></div>
<div class="text">
asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/> asdf<br/>asdf<br/>asdf<br/>sdf<br/>
<div class="footer">
back forth
</div>
</div>
</div>
</div>
</div>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment