css - HTML Layout over background DIV -
i trying achieve layout in image below. hidden-container
div positioned @ 0, 0 on parent main-container
div , shown on button click.
i have done a mock fiddle here.. col size smaller easier see in 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 appreciated.
refer example using display:inline-block
, along-with css calc() function
minus
width
of 300px
overall container align two column
i.e col1
, col2
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>
Comments
Post a Comment