fluidLayoutvw

three columns

by ramesh valasa

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="mian">
  <div id="contentwrapper">
    <div id="contentcolumn">
      <div class="contentinner">
        variable container
      </div>
    </div>
  </div>
  <div id="leftcolumn" class="sides">
    <div class="innertube"><b>Left Column: <em>230px</em></b> </div>
    <div class="vertical sidebar left">
       <div class="toggle icon icon-collapse"></div>
     </div>
  </div>
  <div id="rightcolumn">
    <div class="vertical sidebar right">
       <div class="toggle icon icon-collapse"></div>
     </div>
    <div class="innertube"><b>Right Column: <em>200px</em></b> </div>
  </div>
 </div>

CSS

html, body {
  height: 100vh;
  width: 100vw;
  margin: 0;
}
#contentwrapper {
    width: 100vw;
    height: 100vh;
}

#leftcolumn {
    position: absolute;
    top: 0;
    height: 100vh;
    width: 20vw;
    background: #C8FC98;
}

#rightcolumn {
    position: absolute;
    top: 0;
    right: 0;
    width: 20vw;
    height: 100vh;
    background: #FDE95E;
}

.sidebar {
    width: 4vw;
    height: 100vh;
    display: inline-block;
    cursor: pointer;
    transition: -webkit-transform .2s ease-in-out 0s;
    transition: transform .2s ease-in-out 0s;
    transition: transform .2s ease-in-out 0s,-webkit-transform .2s ease-in-out 0s;
}
.left {
   background: #FDE95E;
    float: right;
}
.right {
  background: #C8FC98;
    float: left;
}

#contentcolumn {
    margin: 0 20vw 0 20vw;
}

.leftCollapsed #contentcolumn {
    margin-left: 5vw;
}

.rightCollapsed #contentcolumn {
    margin-right: 5vw;
}

.innertube {
    display: inline-block;
    width: 15.7vw;
    vertical-align: top;
    overflow: hidden;
}

.leftCollapsed #leftcolumn {
    -webkit-transform: translateX(-15.7vw);
    transform: translateX(-15.7vw);
}

.rightCollapsed #rightcolumn {
    -webkit-transform: translateX(15.7vw);
    transform: translateX(15.7vw);
}
.contentinner {
    height: 100vh;
    border: 1px solid red;
}

JavaScript

(function(){

$('.left').on('click',function(){
	$('.mian').toggleClass('leftCollapsed');
});

$('.right').on('click',function(){
	$('.mian').toggleClass('rightCollapsed');
});

})();