Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save AlphaBlossom/ae2566ad0b0b9ad9b7d3 to your computer and use it in GitHub Desktop.
Save AlphaBlossom/ae2566ad0b0b9ad9b7d3 to your computer and use it in GitHub Desktop.
Equal, Full Height Colums using CSS Only
.content-sidebar-wrap {
position: relative;
float: left;
width: 100%;
margin-bottom: 50px;
z-index: 99; /* needed for Safari 7 */
}
.content:after,
.sidebar-primary:after {
content: " ";
background: none repeat scroll 0 0 #eee;
border: 1px solid #CCCCCC;
display: block;
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
}
.content:after {
left: 0;
width: 740px;
}
.sidebar-primary:after {
right: 0;
width: 360px;
}
/**********************************
*
* Full Height Two Columns for Genesis Framework
* Sidebar / Content / Sidebar layout - Demo 3
*
* @author AlphaBlossom / Tony Eppright
* @link http://www.alphablossom.com
*
**********************************/
.site-inner {
padding: 0;
position: relative;
z-index: 99; /* needed for Safari 7 */
}
.content-sidebar-wrap {
position: relative;
width: 80.7017543%; /* 920/1140 */
}
/* Change Secondary Sidebar, Content and Sidebar to percentage/fluid width */
.sidebar.sidebar-secondary {
width: 19.2982456%; /* 220/1140 */
}
.content {
width: 60.8695652%; /* 560/920 */
}
.sidebar.sidebar-primary {
width: 39.1304347%; /* 360/920 */
}
.sidebar.sidebar-secondary:after,
.content:after,
.sidebar.sidebar-primary:after {
content: " ";
display: block;
position: absolute;
top: 0;
bottom: 0;
z-index: -1;
}
.sidebar.sidebar-secondary:after {
background: none repeat scroll 0 0 #CCCCCC;
left: 0;
width: 19.2982456%; /* 220/1140 */
}
.content:after {
background: none repeat scroll 0 0 #0099ff;
left: 0;
width: 60.8695652%; /* 560/920 */
}
.sidebar.sidebar-primary:after {
background: none repeat scroll 0 0 #ff9900;
right: 0;
width: 39.1304347%; /* 360/920 */
}
/**********************************
*
* Full Height Two Columns for Genesis Framework
* Content / Sidebar layout - Demo 1
*
* @author AlphaBlossom / Tony Eppright
* @link http://www.alphablossom.com
*
**********************************/
.content-sidebar-wrap {
overflow: hidden;
}
main.content,
.sidebar-primary {
background-color: #ccc;
padding-bottom: 20000px;
margin-bottom: -20000px;
border: 1px solid #000;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment