How to do div after div in page order-CodePudding

i 'm beginner in css, i can't put div after for example: i want to put red div after green div (in image) [1]: https://i.stack.imgur.com/PSYtu.png but i want to make divs sticking to the edges of the screen .

i tried :

.green {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: green;
  margin-bottom: 5px;
 }
 
 .red {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: red;
 }

<div >
  
</div>

<div >

</div>

CodePudding user response：

Just declare top bottom. To span the entire width you could also use: left righ: 0.

To shorten the code you can also use the inset-property with a 3 value syntax:
inset: [top] [left/right] [bottom]

body {
  margin: 0;
}

.green {
  position: absolute;
  inset: 0 0 50%;
  background-color: green;
 }
 
 .red {
  position: absolute;
  inset: 50% 0 0;
  background-color: red;
 }

<div >
  
</div>

<div >

</div>

CodePudding user response：

If you just write this code with relative positions I think will do the work. But following your example (where you set the position as absolute) I let you the following code. I don't know if it is what do you expect, if it isn't, please com back with more details.

.green {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  background-color: green;
  margin-bottom: 5px;
 }
 
 .red {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 50vh;
  background-color: red;
  transform: translateY(100%);
 }

<div >
  
</div>

<div >

</div>

CodePudding user response：

You can use vh (viewport width) units to set height relative to the viewport.

body {
  padding: 0;
  margin: 0;
}

.green {
  width: 100%;
  height: 50vh;
  background-color: green;
 }
 
 .red {
  width: 100%;
  height: 50vh;
  background-color: red;
 }

<div >
  
</div>

<div >

</div>

CodePudding user response：

It is happening because red div is overlapping your green div

so just change your code into this:

.green{
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 50%;
       background-color: green;
       margin-bottom: 5px;
           }
 
      .red {
       position: absolute;
       top: 50%;
       left: 0;
       width: 100%;
       height: 50%;
       background-color: red;
            }

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

CodePudding user response：

The big question is, what do you mean by

i want to put red div after green div

Your browser reads its given html-code from left to right and from top to bottom, until you define something different in your CSS. This means "after" can also mean an alignment of your red div on the right edge of your green div.

But all you need is basically the snippet down below. If you want them to be align centered (like shown in your screenshot), just add "margin: 0 auto" and you good to go.

I personally can only recommend testing positioning, as a beginner, with absolute values like "px" instead of relative values like percentage. This makes it much easier to understand what's happening.

.green {
  background-color: green;
  height: 100px;
  width: 100px;
  // margin: 0 auto;
}

.red {
  background-color: red;
  height: 100px;
  width: 100px;
  // margin: 0 auto;
}

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

! of Course, if you run the code you have to remove the comment signs !