jakerocheleau

/**
 * html-css column layouts
 */
html { background: #f06; background: linear-gradient(45deg, #f06, yellow);
min-height: 100%; }
div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

#wrapper { max-width: 1000px; min-width:750px; margin: 0 auto; }
.container { height: 100%; float: left; background: #fff; }

jakerocheleau

/**
 * html-css column layouts
 */
html { background: #f06; background: linear-gradient(45deg, #f06, yellow);
min-height: 100%; }
div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.container { display: block; position: relative; max-width: 1000px; min-width: 550px; margin: 0 auto; }

#left { width: 220px; background:#c9c; position: absolute; left: 0; top: 0; height: 100%; }

jakerocheleau

/**
 * Inner-element Hover
 */
body { padding: 0px 20px; }

.container { position: relative; }
.mini { position: absolute; top: 10px; left: 15px; 
display: none;
padding: 4px 5px; 
background: rgba(255,255,255,0.8); 

jakerocheleau

/**
 * Inner-element Hover
 */
body { padding: 0px 20px; }

.container { position: relative; }
.mini { position: absolute; top: 10px; left: 15px; 
display: none;
padding: 4px 5px; 
background: rgba(255,255,255,0.8); 

jakerocheleau

.lft-column {
	width: 70%;
	
	background: indianred;
	}

.rt-column {
	width: 250px;
	overflow: hidden;/* This does the magic */
	float: right;