HTML Layout over background DIV - html

Question

I am trying to achieve the layout in the image below. The hidden-container div is positioned at 0, 0 on the parent main-container div and shown on button click.
I have done a mock up fiddle here.. The col size is smaller so it is easier to see in the fiddle.
.content {
margin: 50px auto 0 auto;
}
#main-container {
width: 100%;
max-width: 500px;
max-height: 200px;
overflow: hidden;
margin: 50px auto 0 auto;
}
#hidden-container {
padding: 0;
max-width: 500px;
max-height: 200px;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1047;
}
#plyr-container {
padding: 0;
max-width: 300px;
max-height: 200px;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1048;
background-color: red;
}
#info-container {
max-width: 300px;
max-height: 200px;
width: 100%;
height: 100%;
z-index: 1048;
right: 0;
top: 0;
box-sizing: border-box;
-webkit-box-shadow: -4px 0px 5px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow: -4px 0px 5px 0px rgba(50, 50, 50, 0.3);
box-shadow: -4px 0px 5px 0px rgba(50, 50, 50, 0.3);
}
#plyra,
#plyrb {
padding: 0;
text-align: left;
position: absolute;
max-width: 300px;
max-height: 200px;
width: 100%;
height: 50%;
z-index: 1049;
}
#plyra {
left: 0;
top: 0;
height: 50%;
background-color: green;
}
#plyrb {
left: 0;
top: 50%;
height: 50%;
border-top: 1px solid black;
background-color: yellow;
}
<div class="content">
<div id="main-container">
<div id="hidden-container">
<div id="plyr-container">
<div id="plyra"></div>
<div id="plyrb"></div>
</div>
<div id="info-container"></div>
</div>
</div>
</div>
Any help is appreciated.

Answer 1

You can do this using flexbox. I did some modification with changing the # to class instead. You have some unnecessary properties, like z-index, top, left. Those properties won't work unless you have absolute or relative on the element. You don't need them to position it and in this particular case they really do nothing. Is this something you where looking for?
I strongly recommend reading this article on css-tricks.com about flexbox.
DEMO: Fiddle
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.content {
margin: 50px auto 0 auto;
}
.main-container {
width: 100%;
overflow: hidden;
margin: 50px auto 0 auto;
background-color: deepskyblue;
}
.hidden-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
background-color: lightcoral;
}
.plyr-container {
flex-basis: 100%;
flex-grow: 1;
min-height: 300px;
display: flex;
flex-direction: column;
background-color: red;
}
.info-container {
flex-basis: 300px;
flex-grow: 1;
flex-shrink: 0;
-webkit-box-shadow: -4px 0px 5px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow: -4px 0px 5px 0px rgba(50, 50, 50, 0.3);
box-shadow: -4px 0px 5px 0px rgba(50, 50, 50, 0.3);
background-color: deeppink;
}
.plyra,
.plyrb {
text-align: left;
flex-basis: 50%; //use this instead of width
flex-grow: 1;
flex-shrink: 0;
}
.plyra {
background-color: green;
}
.plyrb {
border-top: 1px solid black;
background-color: yellow;
}
<div class="content">
<div class="main-container">
<div class="hidden-container">
<div class="plyr-container">
<div class="plyra">a</div>
<div class="plyrb">a</div>
</div>
<div class="info-container">d</div>
</div>
</div>
</div>

Answer 2

Refer this as an example you could even do that using display:inline-block, along-with css calc() function to minus the width of 300px from overall container to align two column i.e col1 and col2 as below,
#container {
width: 100%;
height: 100vh;
font-size: 0;
}
#container > .col1 {
width: calc(100% - 300px);
height: 100%;
background: #111;
display: inline-block;
}
#container > .col1 > .c1 {
width: 100%;
height: 50%;
background: pink;
display: inline-block;
}
#container > .col1 > .c2 {
width: 100%;
height: 50%;
background: lightblue;
display: inline-block;
}
#container > .col2 {
width: 300px;
height: 100%;
background: yellow;
display: inline-block;
}
<div id="container">
<div class="col1">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="col2"></div>
</div>