I have combed through numerous resources but still haven't found a solution to my problem. I am struggling with figuring out how to stack the "top_section" div on top of the "middle_section" div. Currently, "middle_section" is appearing above "top_section", but ideally it should be positioned right below "top_section".
Here's the HTML
<!DOCTYPE html>
<html>
</head>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="wrapper">
<div id="top_section">
<div class="content_wrapper">
<section id="td_left">
<h1>XYZ</h1>
</section>
<section id="td_right"></section>
</div>
</div>
<div id="middle_section">
<div class="content_wrapper">
<h1>Stuff</h1>
</div>
</div>
<div id="bottom_section"></div>
</div>
Here's the CSS:
.content_wrapper {
width: 1100px;
margin: 0 auto;
background: red; }
header {
background: blue; }
header img {
width: 14%;
margin: 0 auto 0 auto; }
.sections, #top_section, #middle_section {
width: 100%;
position: absolute;
float: left; }
#top_section {
height: 80.3%;
background: #34495D; }
#middle_section {
height: 70.3%;
background: #21303F; }