Skip to content

Instantly share code, notes, and snippets.

@marcolago
Created October 12, 2012 14:12
Show Gist options
  • Save marcolago/3879366 to your computer and use it in GitHub Desktop.
Save marcolago/3879366 to your computer and use it in GitHub Desktop.
Test: Overflow Visible, floats and other layout stuff
/**
* Test: Overflow Visible, floats and other layout stuff
*/
.column-wide {
width: 400px;
height: 600px;
float: left;
overflow: visible;
background-color: #ffff00;
position: relative;
z-index: 1;
}
.column-narrow {
width: 150px;
height: 600px;
float: left;
background-color: rgba(255,128,0,0.7);
position: relative;
z-index: 2;
}
.cover {
width: 550px;
height: 100px;
background-color: #00ff00;
position: relative;
z-index: 3;
}
.article-body {
width: 100%;
height: 100px;
float: left;
background-color: #00ffff;
}
.side-content {
width: 100%;
height: 150px;
margin-top: 100px;
background-color: #0000ff;
}
<div class="column-wide">
<div class="cover"></div>
<div class="article-body"></div>
</div>
<div class="column-narrow">
<div class="side-content"></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