How do i put two divs underneath eachother using css

Question

Hi I am having problems placing two divs underneath eachother. I have a container div which is centered in the page using the display flex and justify content center as this is the only way I could get it to work. I then have three divs, one taking up 50% of the screen and the other two taking up 20%, I want the other two divs to be beneath eachother instead of next to eachother but cannot figure out how to do so. This is my HTML:

<div id='content'>
    <div id='col1'>
        <p>paragraph 1</p>
    </div>

    <div id='col2'>
        <p>paragraph 2</p>
    </div>

    <div id='col3'>
        <p>paragraph 3</p>
    </div>

</div>

This is my CSS:

#content {
    display: flex;
    justify-content: center;
}

#col1, #col2 {
    float:left;
    margin-top:5px;
    margin-bottom:5px;
    border-radius:5px;
}

#col1 {
    width:50%;
}

#col2 {
    background: #FCF;
    width: 20%;
    height:250px;
}

#col3 {
    display:block;
    background: orange;
    width:20%;
    height: 250px;
    margin-top:5px;
    margin-bottom:5px;
    border-radius:5px;
}

Thanks in advance for any help.

https://stackoverflow.com/questions/33947885/left-column-and-stacked-right-column-using-flexbox-css — Paulie_D, Dec 28 '18 at 13:12

score 0 · Answer 1 · answered Dec 28 '18 at 13:10

If I get it correct, to center all your content you can do something like this

#content {
margin-left: auto;
width:50%;
margin-right: auto;
}

#col1, #col2 {
margin-top:5px;
margin-bottom:5px;
border-radius:5px;
}

#col1 {
background: red;
}

#col2 {
background: #FCF;
width: 20%;
height:250px;
}

#col3 {
background: orange;
width:20%;
height: 250px;
margin-top:5px;
margin-bottom:5px;
border-radius:5px;
}

Div is a block by default so don't use display:blockand divs are stacked onto each other by default. If you want to have 2 divs next to each other use float: left and then

<div style="clear:both"/>

to restore the default stack-on-top-of-each-other behaviour

Good luck! :)

Mordecai · Answer 2 · 2018-12-29T09:25:28.677

0

Use flex-direction:column for other two divs -like this:

#content {
  display: flex;
  justify-content: center;
  flex-direction: row;
  border: solid 1px /* for reference */
}

[id*="col"] {
  border: solid 1px; /* for reference */
  margin: 5px 5px 5px 0px;
  border-radius:5px;
}

#col1 {
  flex-basis: 50%
}

#col2 {
  flex-basis: 20%;
  background: pink
}

#col3 {
  flex-basis: 20%;
  background: orange
}

<div id='content'>

  <div id='col1'>
    <p>paragraph 1</p>
  </div>

  <!-- added new div with flex-direction style -->
  <div style="flex-direction:column">

    <div id='col2'>
      <p>paragraph 2</p>
    </div>

    <div id='col3'>
      <p>paragraph 3</p>
    </div>

  </div>

</div>

edited Dec 29 '18 at 09:25

answered Dec 28 '18 at 13:17

Mordecai

1,414
1
7
20

Thank you for your response, I have done what you said and it has helped me to align the divs in the order I want however all the divs inside the content div are not centered horizontally in the page, I do not know why justify content is not working in the css. Any ideas? – Daniel Wood Dec 28 '18 at 15:59
I think there is some space to the right of the col 1 and col 2 div that is preventing justify content center from working because when I change flex-direction row to flex direction row reverse there is some space between col 2 and 3 div and col1 div – Daniel Wood Dec 28 '18 at 16:07
`justify-content` is working. But why you use `width:20%` for child elements? You can use `flex-basis`option for this. I edited code for you, please run again. – Mordecai Dec 29 '18 at 09:28

How do i put two divs underneath eachother using css

2 Answers2