My webpage design using bootstrap features two containers as follows: First container :
- A white column taking up 7/12 of the first row
- A black column taking up 5/12 of the second row Second container (below the first one)
- A grey panel
The first container occupies the entire page and when you scroll down to the second container, it also fills the entire page height
HTML :
<div class="container-fluid h-100 nopadding">
<div class="row h-100 nopadding">
<div class="col-md-7 left nopadding">
left
</div>
<div class="col-md-5 right nopadding">
right
</div>
</div>
</div>
<div class="container-fluid h-100 padding">
<div class="row h-100">
<div class="col details nopadding">details</div>
</div>
</div>
CSS :
html,
body {
height: 100%;
}
.nopadding {
margin: 0 !important;
padding: 0 !important;
}
.left {
background: white;
color: black;
height: 100%;
}
.right {
background: black;
color: white;
height: 100%;
}
.details {
background: grey;
color: white;
height: 100%;
}
Below are screenshots of the page layout. When there is enough room for the black column, everything works fine. However, resizing the window causes the black column to go under the grey container [observed by z-index]) :
https://i.sstatic.net/ZkwnC.png https://i.sstatic.net/OqSFz.png
https://i.sstatic.net/pcHRl.png https://i.sstatic.net/Ncl6E.png
I want the black column to be positioned directly below the white one when resizing, and the grey column to move underneath the black column upon resize.
Thank you!