CSS Tabs>Div hidden behind Container Div - html

Question

I'm struggling to get my head around what is causing the "tabbed" div to be hidden from view. I can't work out whether it is the content or container div causing this issue.
If you change the ".tabs > div" position from absolute to relative then div class="tabbed" appears as I would like but it causes the content of the tabs stack on top of one another.
Is this a position/z-index or overflow issue?
Any help would be appreciated.
Here is the code:
* {
box-sizing: border-box;
}
body {
background: #fff;
color: #262626;
font: 1em 'PT Sans', sans-serif;
}
::selection {
background-color: #4EC6DE;
}
#content {
padding: 5px 0 5px 0;
position: relative;
overflow: hidden;
}
.container {
position: relative;
clear: both;
width: 100%;
min-height: 350px;
max-width: 1200px;
padding: 5px 0px 5px 0px;
overflow: hidden;
background-color: #ffffff;
}
.pCV {
font-family: 'Libre Baskerville', serif;
font-size: 16px;
line-height: 1.6;
padding: 0;
}
.cvheader {
font-family: 'Libre Baskerville', serif;
font-size: 16px;
font-weight: bold;
}
#textbox {
width: 100%;
border: 1px solid #ccc
}
/* Style buttons */
#downloadbtn {
background-color: #ffffff;
border: 2px solid #262626;
color: #262626;
padding: 12px 12px;
cursor: pointer;
font-size: 20px;
float: right;
margin-top: -50px;
}
/* Darker background on mouse-over */
#downloadbtn:hover {
background-color: #888888;
color: #ffffff;
border: 2px solid #888;
transition: all .8s ease-in-out;
}
.tabbed {
width: 1000px;
margin: 50px auto;
}
.tabbed>input {
display: none;
}
.tabbed>label {
display: block;
float: left;
padding: 12px 20px;
margin-right: 10px;
cursor: pointer;
transition: background-color .3s;
}
.tabbed>label:hover,
.tabbed>input:checked+label {
background: #4EC6DE;
}
.tabs {
clear: both;
perspective: 600px;
}
.tabs>div {
width: 1000px;
position: absolute;
border: 2px solid #4EC6DE;
padding: 10px 30px 40px;
line-height: 1.4em;
opacity: 0;
transform: rotateX(-20deg);
transform-origin: top center;
transition: opacity .3s, transform 1s;
z-index: 0;
}
#tab-nav-1:checked~.tabs>div:nth-of-type(1),
#tab-nav-2:checked~.tabs>div:nth-of-type(2) {
transform: rotateX(0);
opacity: 1;
z-index: 1;
}
#media screen and (max-width: 700px) {
.tabbed {
width: 400px
}
.tabbed>label {
display: none
}
.tabs>div {
width: 400px;
border: none;
padding: 0;
opacity: 1;
position: relative;
transform: none;
margin-bottom: 60px;
}
.tabs>div h2 {
border-bottom: 2px solid #4EC6DE;
padding-bottom: .5em;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.6/prefixfree.min.js"></script>
<div id="content">
<div class="container">
<div class="tabbed">
<input type="radio" name="tabs" id="tab-nav-1" checked>
<label for="tab-nav-1">CV 1</label>
<input type="radio" name="tabs" id="tab-nav-2">
<label for="tab-nav-2">CV 2</label>
<div class="tabs">
<div>
<div id="textbox">
<h2 class="cvheader">EDUCATION</h2>
<a href="ArtistCV.pdf" download>
<button id="downloadbtn"><i class="fa fa-download fa-fw"></i> Download</button></a>
<div style="clear: both;"></div>
</div>
<p class="pCV">Maecenas dictum, urna ut consequat condimentum, est dui commodo diam, ac pretium dui ante eu quam. </p>
</div>
<div><h2>CSS</h2><p>Maecenas dictum, urna ut consequat condimentum, est dui commodo diam, ac pretium dui ante eu quam. Curabitur posuere metus nec tellus venenatis placerat. Ut egestas neque in odio vulputate gravida. In at justo ac est laoreet eleifend vel quis arcu. Aliquam erat volutpat. Proin vitae vehicula neque. Nam tempus erat ac ante tincidunt tincidunt. Pellentesque eu nibh sapien. Nunc augue magna, lacinia eget congue eget, mattis id tortor. Fusce id vestibulum neque. Proin tincidunt tellus ut risus lobortis cursus. Duis sit amet urna vel sapien ullamcorper varius.</p></div>
</div>
</div>
</div>
</div>

Answer 1

I'm struggling to get my head around what is causing the "tabbed" div to be hidden from view.
You have mistake in your HTML markup. Change this:
Download</button</a>
To this:
Download</button></a>
And add this to your CSS:
.container {
min-height: 350px;
}
If you don't want to set min-height manually, then you'll need to use JS to calculate it dynamically. Hardly imagine doing this with pure CSS.