EdwardBlack EdwardBlack - 1 month ago 21
CSS Question

How to prevent div from disappearing?

I have made a div structure by using bootstrap grid, however the div with background-color: red always dissapears after you resize the window and make it very small.

Why is this happening and is there a way to prevent it?

Play it: http://www.w3schools.com/code/tryit.asp?filename=F0JT60DW5CHG



.row-sm-3 {
height: 33.33%;
}

#wrap {
height: inherit;
background: red;

}

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container-fluid">

<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>


<div class="col-sm-8 col-sm-offset-2" style="height:300px">
<div class="col-sm-6" style="color: white; background:black; height: inherit;">

<div style="height: 25%;"><!-- space top --></div>

<div style="height: 50%;">
<div style="background:red">
<h2 id="sps_einleitung_h2">LOREM IPSUM</h2>
</div>

<div id="sps_einleitung_head_kasten_2">
LOREM IPSUM
<br><br>
LOREM IPSUM
</div>
</div>

<div style="height: 25%;"><!-- space bottom --></div>

</div>

<div class="col-sm-6" id="wrap">

<div style="height: 33.33%;position: relative;">
<img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg" style="width: 50px;position: absolute;">
</div>
<div style="height: 33.33%;position: relative;">
<img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg" style="width: 50px;position: absolute;">
</div>
<div style="height: 33.33%;position: relative;">
<img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg" style="width: 50px;position: absolute;">
</div>
</div>
</div>



<div class="col-sm-8 col-sm-offset-2" style="background-color:green; height:200px;">
<div class="row" style="height:inherit;">
<div class="col-sm-6" style="height:inherit; background-color:blue;">
<div class="row-sm-3 row">A</div>
<div class="row-sm-3 row">B</div>
<div class="row-sm-3 row">C</div>
</div>
<div class="col-sm-6" style="height:inherit; background-color:yellow;">
<div class="row-sm-3 row">D</div>
<div class="row-sm-3 row">E</div>
<div class="row-sm-3 row">F</div>
</div>
</div>
</div>





The red div is always getting under the blue div, why does that happen and how can I solve it?

Answer

Imagine you have a bottle of water which can have 1 liter but you want to fill it with 2 liter.

You can't have a parent div with a height of 300px and have 2 children in this which have also 300px. Reduce the height of both children or increase the height of the parent element.

I hope this helped you.


Read more about height.