CODEWITHSUNDEEP
htmlcss
AW0CodeX
AW0CodeX

Reputation: 3

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>

Upvotes: 0

Views: 55

Answers (5)

VebDav
VebDav

Reputation: 162

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 !

Upvotes: 0

spandy
spandy

Reputation: 1

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>

Upvotes: 0

tacoshy
tacoshy

Reputation: 13002

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>

Upvotes: 1

RatajS
RatajS

Reputation: 1429

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>

Upvotes: 0

Toni Bordoy
Toni Bordoy

Reputation: 255

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>

Upvotes: 0

Related Questions