I have a challenge with creating a vertical layout of stacked divs. Everything was going smoothly until I encountered the #resume div, which stubbornly stays hidden beneath the table-containing div above it. Despite trying various adjustments to float and position properties, I haven't been successful in getting the div positioned under the .samples div. Interestingly, when I copied the code to JS Fiddle, the issue didn't manifest. Any assistance on this matter would be greatly appreciated.
Below is the code snippet:
HTML:
<head>
<title>Charles's Bio</title>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>
<html>
<body>
<link rel="stylesheet" type="text/css" href="bio.css">
<nav>
<br>
<h1>Learn More About Charles</h1>
<p></p>
...
...
...
.biopage {
position: relative;
}
.samples table{
position: relative;
width: 100%;
}
.samples td{
text-align: center;
width: 30%;
height:300px;
position:relative;
table-layout: fixed;
background-color: rgb(0,300,300);
}
.samples td img{
width: 290px;
height:290px;
z-index: 0;
}
.samples td:hover img{
opacity: .5;
}
.samples p{
margin: 0;
position:absolute;
left: 0;
top: 50%;
right:0;
color: #fff;
font-size: 20px;
text-align: center;
z-index:10;
}
.samples td:hover p{
visibility: visible;
}
.samples td p{
visibility: hidden;
}
.container{
background color: white;
width: 25%;
float: right;
}
.container img{
width: 100%;
}
.space {
height:125px;
background-color: rgb(0,300,300);
}
and a snapshot of the problematic div:
https://i.sstatic.net/eww3t.png
`