Question 44009 in Html Question posted in
Some basic documentation can be found here.

How to create CSS for giving proportional margin – Html

I have to create 3 buttons inside the div container. The space below the buttons must always be double the space above the buttons. How can we write CSS to achieve this? I have attached to image for a clear understanding.

(Here 1H signifies ratio meaning if the space above is 1H then the space below will be 2H)

<div class="main">
  <div class="upper-div></div>
  <div class="lower-div">
    <button class="btn-1">1</button>
    <button class="btn-2">1</button>
    <button class="btn-3">1</button>
  </div>
</div>

enter image description here

I want to know the CSS to create such design using HTML and CSS only.

Tags:

2

Answers


  1. 0 
    .main {
    height: 400px;
    width: 400px;
    background-color: beige;
}

.upper-div {
    height: 40%;
    width: auto;
    background-color: tan;
}

.lower-div{
    height: 60%;
    width: auto;
    display: grid;
    grid-template-rows: 1fr 36px 2fr;
}

.buttons {
    grid-row: 2 / 3;
    display: flex;
}

.btn {
    flex-grow: 1;
}
          <div class="main">
        <div class="upper-div"></div>
        <div class="lower-div">
          <div class="buttons">
            <button class="btn">Button 1</button>
            <button class="btn">Button 2</button>
            <button class="btn">Button 3</button>
          </div>
        </div>
      </div>

    One way is to use a grid system. In this example, I made a grid with 3 rows, with the size of 1 fr (1H in your diagram), 36px and 2 fr (2H in your diagram). After that, I created a div to house the buttons, and inserted this div into the second row of the grid.

    Login or Signup to reply.
  2. 0

    I think you could probably achieve this with CSS grid:

    .main {
  display: grid;
  grid-template-rows: 4fr 6fr;
  height: 100vh;
  background: skyblue;
}

.upper-div {
  background: yellow;
}

.lower-div {
  background: bisque;
  display: grid;
  grid-template-rows: 1fr 36px 2fr;
}

.lower-div > button {
  grid-row: 2;
}
    <div class="main">
  <div class="upper-div"></div>
  <div class="lower-div">
    <button class="btn-1">1</button>
    <button class="btn-2">1</button>
    <button class="btn-3">1</button>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search