Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

<div class="red">

</div>

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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

<div class="red">

</div>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading