'How to do div after div in page order

I'm beginner in CSS, I can't put div after

For example : I want to put red div after green div as the image shows:

but I want to make divs sticking to the edges of the screen .

What 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 class="green">
  
</div>

<div class="red">

</div>
htmlcss


Solution 1:[1]

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 class="green">
  
</div>

<div class="red">

</div>

Solution 2:[2]

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 class="green">
  
</div>

<div class="red">

</div>

Solution 3:[3]

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 class="green"></div>
<div class="red"></div>

Solution 4:[4]

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 class="green">
</div>
<div class="red">
</div>

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tacoshy
Solution 2 RatajS
Solution 3 spandy
Solution 4 VebDav

Related Questions