How to prevent div from disappearing? - html

Question

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">
<!-- Black Container -->
<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>
<!-- Black Container -->
<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>
</div>
The red div is always getting under the blue div, why does that happen and how can I solve it?

Answer 1

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.
.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">
<!-- Black Container -->
<div class="col-sm-6" style="color: white; background:black; height: 300px;">
<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>
<!-- Black Container -->
<div class="col-sm-6" id="wrap" style="height: 300px">
<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;">
<div class="row" style="height:inherit;">
<div class="col-sm-6" style="height:300px; 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:300px; 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>
</div>
Read more about height.

Answer 2

You have added fixed height to first row so that while resizing window second column from first row hide under second row. Add fixed height to two separate column from first row.
replace
<div class="col-sm-8 col-sm-offset-2" style="height:300px">
with
<div class="col-sm-8 col-sm-offset-2">
and
<div class="col-sm-6" style="color: white; background:black; height: inherit;">
with
<div class="col-sm-6" style="color: white; background:black; height: 300px;">

Answer 3

Have you tried changing the z-index?
ex
#wrap {
height: inherit;
background: red;
z-index:10000;
}'

Answer 4

use the css "clear:both" property