How do I stack these divs on top of each other?
Question
I have searched all over Stackoverflow and no solution has worked so far. I need a quick tip or help in order to figure out how would I go about stacking the div id "top_section" on the of the div id "middle_section". right now "middle_section" is on top of "top_section" when it should really be at the bottom right right where "top_section" ends is where "middle_section" should begin.
Heres 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>
Heres 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; }
3 answers
solution1
0 2015-02-03 09:08:46
change
.sections, #top_section, #middle_section {
width: 100%;
position: absolute;
float: left;
}
to
.sections, #top_section, #middle_section {
width: 100%;
position: relative;
display: block;
clear: both
}
solution2
0 2015-02-03 09:12:32
Use "top" to define where the section should start. Dont forget the height of your section have to be 100% or less if you add them to each other.
#top_section {
top: 0%
height: 20%;
background: #34495D; }
#middle_section {
top: 20%;
height: 80%;
background: #21303F; }
solution3
0 2015-02-03 09:12:33
You only need to get rid of your position: absolute .
So your code would have
sections, #top_section, #middle_section {
width: 100%;
float: left; }
instead of
.sections, #top_section, #middle_section {
width: 100%;
position: absolute;
float: left;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.