Skip to content

Instantly share code, notes, and snippets.

@michsch
Created April 1, 2012 18:07
Show Gist options
  • Save michsch/2277441 to your computer and use it in GitHub Desktop.
Save michsch/2277441 to your computer and use it in GitHub Desktop.
YAML 3col layout with fixed sidebars (left and right)
/**
* YAML 3col layout with fixed sidebars (left and right)
* col1 | col2 | col3
*/
body {
background: #efefef;
}
.ym-wrapper {
max-width: 90em;
min-width: 600px;
margin: 0 auto;
background: #fff;
}
.ym-wbox { padding: 10px; }
.ym-column {
display: block;
overflow: hidden;
padding: 0 240px 0 240px; /* column width */
width: auto;
}
.ym-col1 {
position: relative;
float: left;
width: 240px;
margin: 0 0 0 -240px;
background: rgba(255,0,0,0.3);
}
.ym-col2 {
float: left;
width: 100%;;
margin: 0;
background: rgba(0,255,0,0.3);
}
.ym-col3 {
position: relative;
float: left;
width: 240px;
margin: 0 -240px 0 0;
background: rgba(0,0,255,0.3);
}
.ym-cbox { padding: 0 10px; }
<div class="ym-wrapper">
<div class="ym-wbox">
<div class="ym-column">
<div class="ym-col1">
<div class="ym-cbox">
<h1>Col 1</h1>
</div>
</div>
<div class="ym-col2">
<div class="ym-cbox">
<h1>Col 2</h1>
</div>
</div>
<div class="ym-col3">
<div class="ym-cbox">
<h1>Col 3</h1>
</div>
</div>
</div>
</div>
</div>
{"view":"split","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment