'How to responsively roll down area in CSS

I'm trying to add a text area with a white background: enter image description here

I wanted the white area to be lower and further to the right.

.grey-zone {
  color: white;
  width: 100%;
  height: 70vh;
  background-color: #2f3e4d;
}

.whoami {
  color: black;
  width: 25%;
  background-color: #ffffff;
  padding: .5%;
}

.whoami p {
  padding-top: 5%;
  font-size: 105%;
}
<div class="grey-zone">
  <div class="whoami">
    <h1>Qui suis-je?</h1>
  </div>
</div>

Does someone know how to do that? Thanks

htmlcss


Solution 1:[1]

If you want to play in white space, you can flex your main container and move the contents around as you wish.

.grey-zone {
    color: white;
    width: 100%;
    height: 70vh;
    background-color: #2f3e4d;
    display: flex;
    align-items: end;
    justify-content: end;
}

If you add the last 3 css codes I added, you will fix the white box to the bottom right.

Solution 2:[2]

One way is using from padding for .grey-zone:

.grey-zone {
  box-sizing: border-box; /*here*/
  color: white;
  width: 100%;
  height: 100vh;
  background-color: #2f3e4d;
  padding: 20px 0 0 20px; /*here*/
}
.whoami {
  color: black;
  width: 25%;
  background-color: #ffffff;
  padding: .5%;
}
<div class="grey-zone">
  <div class="whoami">
    <h1>Qui suis-je?</h1>
  </div>
</div>

Solution 3:[3]

You can add this to you class .whoami

.grey-zone {
  color: white;
  width: 100%;
  height: 100vh;
  background-color: #2f3e4d;
}

.whoami {
  color: black;
  width: 25%;
  background-color: #ffffff;
  padding: .5%;
  position: absolute;
  top: 50px;
  left: 20px;
}
<div class="grey-zone">
  <div class="whoami">
    <h1>Qui suis-je?</h1>
  </div>
</div>

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 Batuhan Zorbey Zengin
Solution 2 Arman Ebrahimi
Solution 3 Arman Ebrahimi

Related Questions