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

Question

Here's a very 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, and provides two buttons to hide and show the middle div. What I'd like to know is how I keep div3 from sliding over to the left when div2 is hidden. In other words I'd like div3 to remain in its original location regardless of whether div2 is hidden or visible. It is required, however, that the initial HTML page be displayed with all 3 divs visible as shown initially in the jsFiddle.

possible duplicate of [jQuery hide element while preserving its space in page layout](http://stackoverflow.com/questions/6393632/jquery-hide-element-while-preserving-its-space-in-page-layout) — misterManSam, Jul 17 '15 at 02:18

brettwhiteman · Answer 1 · 2015-07-17T02:48:02.703

8

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

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

Note: opacity won't work in IE < 9

edited Jul 17 '15 at 02:48

answered Jul 17 '15 at 01:21

brettwhiteman

4,210
2
29
38

How does visibility have less support than opacity??? Opacity is css3, visibility is css2. You mention opacity doesn't work in ie < 9. Visibility was added in ie4 – dmeglio Jul 17 '15 at 02:17

score 2 · Answer 2 · answered Jul 17 '15 at 02:00

By adding an external div you can achieve what you looking for. Here is your code and jsFiddle

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>

.div1 {
    height:300px;
    width:20%;
    background-color: red;
    float:left;
}
.div2 {
    height:300px;
    width:100%;
    background-color: green;
    float:left
}
    .hideDiv {
    height:300px;
    width:20%;
    float:left
}
.div3 {
    height:300px;
    width:35%;
    background-color: pink;
    float:left
}
</style>
<meta charset="ISO-8859-1">
<title>Test</title>
</head>
<body>
<div class="div1">div1</div>
<div class ="hideDiv"><div class="div2">div2</div></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>

</body>
<script>
function hideDiv2()
{
    $('.div2').hide();
}
function showDiv2()
{
    $('.div2').show();
}
</script>
</html>

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

2 Answers2