CODEWITHSUNDEEP
htmlcss
tim987980
tim987980

Reputation: 41

How to Stack Divs on top of each other

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,

Upvotes: 3

Views: 232

Answers (4)

zer00ne
zer00ne

Reputation: 43860

View the snippet in Full Page.

float is only: left, right, or none. There isn't a: top or 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

Upvotes: 1

Axel Amthor
Axel Amthor

Reputation: 11096

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/

Upvotes: 0

Diego Bauleo
Diego Bauleo

Reputation: 681

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/

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

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:

Upvotes: 3

Related Questions