0

I'm currently making a simple html page with two sections with content inside of each of them but the last content of the second div .right is going on the bottom of the page and make the page scrollable.

I tried making another div and put a flex-direction: column but it doesn't work:

body {
  margin: 0;
}

.main-container {
  display: flex;
  flex-direction: column;
}

.left {
  background: #ecece9;
  width: 50%;
  height: 100vh;
}

.right {
  background: #ffffff;
  width: 50%;
  height: 100vh;
}
<div class="main-container">
  <div class="left">
    <h2>content</h2>
  </div>
  <div class="right">
    <h2>content should be on top</h2>
  </div>
</div>

How can I put two <div> that has the same width and height next to each other without having to scroll?

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Anna Arterburn
  • 45
  • 3
  • `flex-direction: column` makes the children line up in a column; in other words, one on top of the other, which sounds the opposite of what you want -- remove that. Instead of `width`, try using `flex-basis: 50%`. – Heretic Monkey Apr 27 '20 at 16:34
  • Does this answer your question? [CSS two div width 50% in one line with line break in file](https://stackoverflow.com/questions/10698636/css-two-div-width-50-in-one-line-with-line-break-in-file) – Heretic Monkey Apr 27 '20 at 16:38

4 Answers4

0

Change the flex direction from column to row

body {
  margin: 0;
}

.main-container {
  display: flex;
  flex-direction: row;
}

.left {
  background: #ecece9;
  width: 50%;
  height: 100vh;
}

.right {
  background: #ffffff;
  width: 50%;
  height: 100vh;
}
<div class="main-container">
  <div class="left">
    <h2>content</h2>
  </div>
  <div class="right">
    <h2>content should be on top</h2>
  </div>
 </div>
j08691
  • 204,283
  • 31
  • 260
  • 272
0

You need to use flex-direction: row and not flex-direction: column.

To avoid repeating width: 50%; height: 100vh; for both .left and .right, I would also create another class, such as .box, which is applied to both and contains these properties.

body {
  margin: 0;
}

.main-container {
  display: flex;
  flex-direction: row;
}

.box {
  width: 50%;
  height: 100vh;
}

.left {
  background: #ecece9;
}

.right {
  background: #ffffff;
}
<div class="main-container">
  <div class="left box">
    <h2>content</h2>
  </div>
  <div class="right box">
    <h2>content should be on top</h2>
  </div>
 </div>
Run_Script
  • 2,487
  • 2
  • 15
  • 30
0

Use CSS Grid to build Layouts it is very powerful. See I changed only two lines and the layout is ready.

   .main-container {
  display: grid;
  grid-template-columns: 50% 50%
}


body {
  margin: 0;
}

.main-container {
  display: grid;
  grid-template-columns: 50% 50%
}

.left {
  background: #ecece9;
  height: 100vh;
}

.right {
  background: #ffffff;
  height: 100vh;
}
<div class="main-container">
  <div class="left">
    <h2>content</h2>
  </div>
  <div class="right">
    <h2>content should be on top</h2>
  </div>
 </div>
MD M Nauman
  • 421
  • 4
  • 10
0

Try only display flex on large screen and and block on mobile

body {
  margin: 0;
}

.main-container {
  display: flex;
}

.left {
  background: #ecece9;
  width: 50%;
  height: 100vh;
  padding:20px;
}

.right {
  background: #ddd;
  width: 50%;
  height: 100vh;
  padding:20px;
}

/* For mobile screen 
@media only screen and (max-width: 768px) {
  .main-container{
    display: block;
  }
  .left, .right{
    width: 100%;
  }
}
*/
<div class="main-container">
    <div class="left">
      <h2>content</h2>
    </div>
    <div class="right">
      <h2>content should be on top</h2>
    </div>
   </div>
Bilal Ahmed
  • 257
  • 2
  • 7