1

I'm having a problem getting div elements to stack on top of each other vertically. I have a mainwrapper and 2 div elements inside them that I need to be stacked. But whenever I give the first inner div position: absolute and then right: 0 or even float: right, it goes into the second div. Is there any way around this?

<div class="wrapper">

    <div class="test1"></div>

    <div class="test2">
        <div class="test3"></div>
    </div>

</div>

CSS:

.wrapper {
    width: 605px;
    margin: 0 auto;
    position: relative;
    background: transparent;
    border: 1px solid black;
    height: 240px;
}

.test1 {
    border: 1px solid black;
    width: 200px;
    height: 30px;
    display: block;
    position: absolute;
    right: 0;
}

.test2 {
    border: 1px solid red;
    width: 600px;
    height: 200px;
    display: block;
    position: absolute;
}

.test3 {
    border: 1px solid black;
    width: 100px;
    height: 20px;
    position: absolute;
    bottom: 20px;
    right: 0;
}

Here is my jsfiddle.

Josh Beam
  • 19,292
  • 3
  • 45
  • 68
SalehK
  • 61
  • 1
  • 1
  • 6
  • 1
    Absolutely positioned elements will ignore other elements. You can't naturally stack them. You could make them "appear" to stack by explicitly defining their position. But if you want the elements to "respect" other elements, you might be better off redesigning without absolute positions. – Mark Miller Jun 15 '14 at 02:35

2 Answers2

0

I'm not entirely sure why you were positioning those like you were. I'm going to assume you were using position: absolute so that those divs wouldn't intervene with other content. Also, there's no need to put 'display: block' for divs, that's their default value.

Here's a fiddle that does as you pleased, and the wrapper is set to position: absolute so that those divs don't intervene with other content. Basically, you'd use the wrapper as a frame. Solution

.wrapper {
    width: 605px;
    left: 50%;
    margin-left: -302.5px;
    position: absolute; 
    background: transparent;
    border: 2px solid black;
    height: 240px;
}

.test1 {
    border: 2px solid green;
    width: 200px;
    height: 30px;
    position: relative;
    right: 0;
}

.test2 {
    border: 2px solid red;
    width: 600px;
    height: 200px;
    position: relative;
}

.test3 {
    border: 2px solid black;
    width: 100px;
    height: 20px;
    position: absolute;
    bottom: 20px;
    right: 0;
}

Note:

  1. position: relative can do the same stuff as position: absolute, AND things still flow as if the element was still in its default position (but it doesn't have to be).
  2. position: absolute takes that element out of the flow
  3. position: fixed is the same as absolute but with reference to the window itself (think fixed navigation bars)
user3718546
  • 323
  • 4
  • 12
0

Would http://jsfiddle.net/uFf9D/ work?

I commented out the dimensions on .wrapper and added overflow: hidden. Then changed .test1 and .test2 to position: relative and float: right.

Edit: Readded the width since it's needed for centering.

.wrapper {
  width: 605px;
/*
  height: 240px;
*/
  overflow: hidden;
  ...
}

.test1 {
/*
  position: relative;
*/
  float: right;
  ...
}

.test2 {
  position: relative;
  float: right;
  ...
}

If you want to skip the floats and overflow: hidden, direction: rtl might be a possible solution on .wrapper.. don't know if it works or whether it's inherited.

Try out this addition to .test2 to fill up .test1:

width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
LGT
  • 4,957
  • 1
  • 21
  • 22
  • is it bad practice to use overflow: auto or overflow:hidden on DIV elements like your example? – SalehK Jun 15 '14 at 10:32
  • I doubt it.. I've seen overflow:hidden suggested in many places for a container to cover floated elements. – LGT Jun 15 '14 at 12:00