How to Stack Divs on top of each other
Question
I have a quick rookie-like question. I used to know CSS, but didn't after having not used it in years.....
Anyway,
I'm trying to stack two divs on top of each other. A portion of my code is below.
CSS:
.faq_left {
width: 134px;
height: 495px;
float: left;
background-color:red;
}
.faq_box_top {
width: 279px;
height: 200px;
float: top;
background-color:black;
}
.faq_box_bottom {
width: 279px;
height: 295px;
float: bottom;
background-color:green;
}
.faq_right {
width:783px;
height: 495px;
float: left;
background-color:yellow;
}
HTML
<div class="faq_left"></div>
<div class="faq_box_top"></div>
<div class="faq_box_bottom"></div>
<div class="faq_right"></div>
I would like faq_left on the left.
I would like faq_box_top & faq_box_bottom to be in the center, where faq_box_top is above faq_box_bottom.
I would like faq_right on the right.
Attached is my page and style sheet along with an image of what I am trying to achieve.
Thanks in advance,
4 answers
solution1
3 2015-10-16 22:59:01
You should use position instead of float as the values you have given is wrong. My way is, to position them in top, left, bottom and right, with adjusting according to the left or top 50% by giving the offset in negative margins.
Have a look at the below snippet.
.faq_left, .faq_box_top, .faq_box_bottom, .faq_right { position: absolute; } .faq_left { width: 134px; height: 495px; left: 0; top: 50%; margin-top: -247px; background-color:red; } .faq_box_top { width: 279px; height: 200px; top: 0; left: 50%; margin-left: -139px; background-color:black; } .faq_box_bottom { width: 279px; height: 295px; left: 50%; margin-left: -139px; bottom: 0; background-color:green; } .faq_right { width:783px; height: 495px; right: 0; top: 50%; margin-top: -247px; background-color:yellow; }
<div class="faq_left"></div> <div class="faq_box_top"></div> <div class="faq_box_bottom"></div> <div class="faq_right"></div>
This is how it looks in 33% zoom:
solution2
1 2015-10-16 23:04:09
View the snippet in Full Page.
float is only: left , right , or none . There isn't a: or top . bottom
Right and left boxes have display: inline-block so that they sit next to each other.
Top and bottom boxes have clear: both so that there is nothing sitting next to them.
Top and bottom boxes have margin: 0 auto so that they are centered.
.faq_left { width: 134px; height: 495px; float: left; background-color: red; display: inline-block; } .faq_box_top { width: 279px; height: 200px; background-color: black; clear: both; margin: 0 auto; } .faq_box_bottom { width: 279px; height: 295px; background-color: green; clear: both; margin: 0 auto; } .faq_right { width: 783px; height: 495px; float: left; background-color: yellow; display: inline-block; }
<!doctype html> <html> <head> <meta charset="utf-8"> <title>33180711</title> </head> <body> <div class="faq_box_top"></div> <div class="faq_left"></div> <div class="faq_right"></div> <div class="faq_box_bottom"></div> </body> </html>
The dimensions of the boxes are odd... is this intentional? It's unclear what you wanted with the left and right boxes...did you want them touching or did you want a space between them? If you desire the latter then change the right box to float: right
solution3
0 ACCPTED 2015-10-16 23:04:15
I wouldn't use absolute positioning since it may easily break your layout. Instead I would wrap the top and bottom divs inside another div, like this:
<div class="faq_left"></div>
<div class="faq_middle">
<div class="faq_box_top"></div>
<div class="faq_box_bottom"></div>
</div>
<div class="faq_right"></div>
And then just change the CSS a little bit:
.faq_left {
width: 134px;
height: 495px;
float: left;
background-color:red;
}
.faq_middle {
width: 279px;
float: left;
}
.faq_box_top {
height: 200px;
background-color:black;
}
.faq_box_bottom {
height: 295px;
background-color:green;
}
.faq_right {
width:134px;
height: 495px;
float: left;
background-color:yellow;
}
You can see it running here: https://jsfiddle.net/u83dpf7t/
solution4
0 2015-10-16 23:05:41
two changes:
.faq_right {
width:783px;
height: 495px;
float: right;
background-color:yellow;
}
That should be right instead of left, well?
and re-order:
<div class="faq_left"></div>
<div class="faq_right"></div>
<div class="faq_box_top"></div>
<div class="faq_box_bottom"></div>
fiddle here: http://jsfiddle.net/pt8dcc1t/1/
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.