How do I automatically stack divs vertically inside a parent?

Question

Here's what I am trying to accomplish...

"parent" has position:relative
"div 1-3" have position:absolute

However, whenever I do this, I find myself having to assign specific "top" values in my CSS. So div 1 might be top:50px, div 2 would be top:150px, and div 3 would be top:225px;

Is there a way to make sure the divs continue to stack inside the parent without assigning top values and/or absolute positioning?

Can you post your code? They should have that behavior by default. — Giovanni Silveira, Oct 10 '13 at 00:15

score 40 · Accepted Answer · edited Oct 10 '13 at 00:21

40

A div should already display as a block and take up a full "row". Here is some HTML and CSS to give an example, compare it to your code:

http://jsfiddle.net/mWcWV/

<div id="parent">

    <div class="child">Foo</div>
    <div class="child">Bar</div>
    <div class="child">Baz</div>

</div>

edited Oct 10 '13 at 00:21

Tepken Vannkorn

9,648
14
61
86

answered Oct 10 '13 at 00:14

Joseph

12,678
19
76
115

score 9 · Answer 2 · edited Oct 10 '13 at 00:26

Should be straight:

HTML:

<div class="container">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
</div>

CSS:

.container {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #ffbf00;
}
.red {
    background-color: #f00;
    width: 200px;
    height: 150px;
    margin: 5px auto;
}
.blue { 
    background-color: #0f0;
    width: 200px;
    height: 150px;
    margin: 5px auto;
}
.green {
    background-color: #00f;
    width: 200px;
    height: 150px;
    margin: 5px auto;
}

Check this fiddle.

score 6 · Answer 3 · edited Apr 29 '17 at 16:52

6

In css file use...

div
{
    display : block;
}

Which will give a break line for each div block and that feature is by default and don't use relative - absolute technique.

edited Apr 29 '17 at 16:52

toonice

2,211
1
13
20

answered Apr 29 '17 at 15:08

Osahady

439
7
16

But the question is: if I have an inline menu and that three boxes arranged inline style using (parent -child) (relative -absolute) technique. How can that be possible – Osahady Apr 29 '17 at 15:09
Doing this will place each `div` *immediately* after its predecessor in a vertical manner rather than in a horizontal manner (i.e. in a column rather than in a row). It will *not* place any space between them, which the Question's illustration suggests is desired behaviour. Also, you should explain *why* you think they should not use the `relative`/ `absolute` technique. – toonice Apr 29 '17 at 15:49

score 2 · Answer 4 · answered Oct 10 '13 at 00:14

Div elements are block elements, which means that they will take a full row and that any element next to them will skip a line. Just do:

<div></div>
<div></div>
<div></div>

If that does not work, you probably need to put them in display: inline-block;

score 1 · Answer 5 · answered May 26 '23 at 13:54

1

HTML:

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <button class="child"></button>
</div>

CSS:

.parent {
  display: block;
}

.child {
  margin: auto;
}

answered May 26 '23 at 13:54

Mason Protsman

11
1

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – DSDmark May 27 '23 at 15:01

score 0 · Answer 6 · answered Oct 10 '13 at 00:14

0

Just remove absolute positioning. Center the divs using margin:auto and then provide whatever vertical margins you like.

answered Oct 10 '13 at 00:14

Mike Brant

70,514
10
99
103

score 0 · Answer 7 · answered Oct 10 '13 at 00:16

0

You can give margin to inner div.

answered Oct 10 '13 at 00:16

Gunjan Kothari

64
5

4

Please try and explain your answer with an example or a demo. It is too short to be accepted as an answer. – thefourtheye Oct 10 '13 at 00:34

How do I automatically stack divs vertically inside a parent?

7 Answers7

Linked