javascript - How do I keep an HTML div from moving when the one to its left is hidden? -

here's simple jsfiddle:

function hidediv2() {    $('.div2').hide();  }    function showdiv2() {    $('.div2').show();  }

.div1 {    height: 300px;    width: 20%;    background-color: red;    float: left;  }  .div2 {    height: 300px;    width: 20%;    background-color: green;    float: left  }  .div3 {    height: 300px;    width: 35%;    background-color: pink;    float: left  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <div class="div1">div1</div>  <div class="div2">div2</div>  <div class="div3">div3</div>  <br>    <div style="clear:both"></div>  <button type="button" onclick="hidediv2()" name="hide">hide div2</button>  <button type="button" name="show" onclick="showdiv2()">show div2</button>

that creates 3 divs in html, , provides 2 buttons hide , show middle div. i'd know how keep div3 sliding on left when div2 hidden. in other words i'd div3 remain in original location regardless of whether div2 hidden or visible. required, however, initial html page displayed 3 divs visible shown in jsfiddle.

instead of using .hide(), set opacity 0, or set visibility hidden

$('.div2').css('visibility', 'hidden'); 

note: opacity won't work in ie < 9