Menu
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,
731
asked Dec 08 '25 22:12
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:
160
View the snippet in Full Page.
float is only: left, right, or none. There isn't a: topbottom
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
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
