Add a box to the bottom right of the screen using CSS

user_16860065 0
Viewed 45

I need to display a list of cards with maximize, minimize and close button to the bottom right of the screen. The cards should be displayed from bottom rigght to left. I am having trouble displaying to the bottom

Code that I tried

.card {
  padding: 24px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.13);
  background: skyblue;
  border-radius: 4px;
  font-family: "Helvetica", sans-serif;
  display: flex;
  flex-direction: column;
  height: 280px;
  width: 160px;
}

.card-body {
  display: flex;
  flex: 1 0 auto;
  align-items: flex-end;
  justify-content: center;
}

.card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

<div class="card">
  <div class="card-actions">
     Close
  </div>
  <div class="card-body">
     Card content
  </div>
</div>
flexbox css html
4 Answers

enter image description here

* {
  box-sizing: border-box;
  /* this is necessary, so we can't have the scrollbar appearing after setting the height of body*/
}

body {
  margin: 0;
  /* deleting the default margin in body (that create the bug of scrollbar appearing) */
}

.cards-container {
  display: flex;
  /* making element one near the other */
  height: 100vh;
  /* setting the height of div to device_height (so we can put them in the end of the page) */
  align-items: flex-end;
  /* aligning the cards to the end of the page */
  justify-content: flex-end;
  /* aligning the cards to the end of the page */
  padding: 1rem;
  /* adding some padding to the end of the page */
  gap: 1rem;
  /* adding some gap between the cards */
}

.card-actions {
  display: flex;
  /* making element one near the other */
  gap: 1rem;
  /* adding some gap between the icons */
  position: absolute;
  /* making the actions appear on the top of the card */
  top: 0.5rem;
  /* setting the top position of the actions to 0.5rem (so they are not overlapping with the card) */
  right: 0.5rem;
  /* setting the right position of the actions to 0.5rem (so they are not overlapping with the card) */
}

.card {
  position: relative;
  /* making the card relative so we can use position absolute in the childs (so we can put the actions on the top of the card) */
  padding: 24px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.13);
  background: skyblue;
  border-radius: 4px;
  font-family: "Helvetica", sans-serif;
  display: flex;
  flex-direction: column;
  height: 280px;
  width: 160px;
}

.card-body {
  display: flex;
  flex: 1 0 auto;
  align-items: flex-end;
  justify-content: center;
}
<head>
  <!-- I used FONTAWESOME for the icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
</head>

<body>
  <div class="cards-container">
    <!-- 1 -->
    <div class="card">
      <div class="card-actions">
        <!-- minimize --><i class="fa-regular fa-square-minus"></i>
        <!-- maximize --><i class="fa-regular fa-window-maximize"></i>
        <!-- close btn--><i class="fa-regular fa-rectangle-xmark"></i>
      </div>
      <div class="card-body">Card content</div>
    </div>

    <!-- 2 -->
    <div class="card">
      <div class="card-actions">
        <!-- minimize --><i class="fa-regular fa-square-minus"></i>
        <!-- maximize --><i class="fa-regular fa-window-maximize"></i>
        <!-- close btn--><i class="fa-regular fa-rectangle-xmark"></i>
      </div>
      <div class="card-body">Card content</div>
    </div>

    <!-- 3 -->
    <div class="card">
      <div class="card-actions">
        <!-- minimize --><i class="fa-regular fa-square-minus"></i>
        <!-- maximize --><i class="fa-regular fa-window-maximize"></i>
        <!-- close btn--><i class="fa-regular fa-rectangle-xmark"></i>
      </div>
      <div class="card-body">Card content</div>
    </div>
  </div>
</body>

user_177168370

you can try using Position property.

For example your HTML content is in a parent div named mainBody

<div class="mainBody">
  <div class="card">
    <div class="card-actions">
     Close
    </div>
    <div class="card-body">
     Card content
    </div>
  </div>
</div>

So, you will have to give postion:relative; to the mainBody and then position:absolute; to the child elements and then use top, bottom, right, left properties to adjust the position.

.mainBody{
    height: 100vh;
  width: 100vw;
  position:relative;
}

.card {
  padding: 24px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.13);
  border-radius: 4px;
  font-family: "Helvetica", sans-serif;
  background: skyblue;
  width:30%;
  height:50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position:absolute;
  bottom:0;
  right:0;
}

.card-body {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
}

.card-actions {
 position:absolute;
  top:0;
  right:0;
}

The content will look like this.

user_195419630

You can try to do this, very simple and easy CSS.

  position: fixed;
  bottom: 0;
  right: 0;

bottom and right attributes can be changed to suit your needs. Remember, think of these attributes as a margin for the element but doesn't effect other elements.

Thank you for considering my answer.

user_164923860 

.main {
    height: 100vh;
    display: flex;
    justify-content: end;
    align-items: end;
}

.card {
    padding: 24px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.13);
    background: skyblue;
    border-radius: 4px;
    font-family: "Helvetica", sans-serif;
    display: flex;
    flex-direction: column;
    height: 280px;
    width: 160px;
}

.card-body {
    display: flex;
    flex: 1 0 auto;
    align-items: flex-end;
    justify-content: center;
}

.card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
}
<div class="main">
        <div class="card">
            <div class="card-actions">
                Close
            </div>
            <div class="card-body">
                Card content
            </div>
        </div>
    </div>

You can also do this using flex property of css

user_187446230
Related