Incorporate a CSS design element in the lower right corner of the screen by adding a box

I'm looking to create a layout where a list of cards is displayed with maximize, minimize, and close buttons located at the bottom right of each card. The cards should be arranged from bottom right to left, but I'm having trouble achieving this placement.

Here is the code I have 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>
htmlcssflexbox

Answer №1

https://i.sstatic.net/HRn4u.jpg

* {
  box-sizing: border-box;
  /* Ensuring the scrollbar does not appear after setting the height of the body */
}

body {
  margin: 0;
  /* Removing default body margin to prevent scrollbar appearance */
}

.cards-container {
  display: flex;
  /* Arranging elements side by side */
  height: 100vh;
  /* Setting div height to device_height for placing at the end of the page */
  align-items: flex-end;
  /* Aligning cards to the bottom of the page */
  justify-content: flex-end;
  /* Aligning cards to the bottom of the page */
  padding: 1rem;
  /* Adding padding at the end of the page */
  gap: 1rem;
  /* Creating space between the cards */
}

.card-actions {
  display: flex;
  /* Arranging elements side by side */
  gap: 1rem;
  /* Creating space between the icons */
  position: absolute;
  /* Positioning actions on top of the card */
  top: 0.5rem;
  /* Setting top position so they don't overlap with the card */
  right: 0.5rem;
  /* Setting right position so they don't overlap with the card */
}

.card {
  position: relative;
  /* Making the card relative for using absolute positioning in children elements */
  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>
  <!-- Using 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">
    <!-- Card 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 button--><i class="fa-regular fa-rectangle-xmark"></i>
      </div>
      <div class="card-body">Card content</div>
    </div>

    <!-- Card 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 button--><i class="fa-regular fa-rectangle-xmark"></i>
      </div>
      <div class="card-body">Card content</div>
    </div>

    <!-- Card 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 button--><i class="fa-regular fa-rectangle-xmark"></i>
      </div>
      <div class="card-body">Card content</div>
    </div>
  </div>
</body>

Answer №2

If you want to adjust the positioning of elements, you can utilize the Position property.

For instance, if your HTML content is within 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>

You would need to assign position:relative; to the mainBody, followed by position:absolute; to the child elements. Then, make use of properties like top, bottom, right, left to fine-tune 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;
}

https://i.sstatic.net/PHh0G.png

Answer №3

If you want to achieve this effect, just a little CSS magic will do the trick.

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

You have the flexibility to adjust the "bottom" and "right" values according to your requirements. Keep in mind that these attributes act as spacing for the element without affecting others.

I hope you found my solution helpful. Thank you!

Answer №4

.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 achieve the same layout using the flex property in CSS as well

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Scroll automatically to the following div after a brief break

On my website, the title of each page fills the entire screen before the content appears when you scroll down. I am interested in adding a smooth automatic scroll feature that will transition to the next section after about half a second on the initial "ti ...

javascriptjqueryhtmlcss

When selecting an option in the burger menu, the dropdown does not react properly

I am facing an issue with the burger menu where one of the options should trigger a dropdown, but the content is not adjusting properly. The dropdown menu should push the other content downward, but currently, it overlaps. I have included the code for th ...

htmlcssdrop-down-menumedia-queries

Is there a way to control a single Angular application using multiple JavaScript scripts?

Summary: I am looking for a way to allow two script files to handle different tasks within the same angular app. One needs to initialize the app, while the other needs to assign a templateCache object to a section of JSON stored in localStorage. Backgrou ...

javascripthtmlangularjs

pressing the enter key to submit form

Searching for videos is presenting a challenge for me when I try to submit the search form by pressing enter, but everything works fine when I click the button. After clicking, the text gets cleared and the /search page loads with the search index displa ...

javascripthtmlreact-redux

Using jQuery Accordion within the MVC Framework

I'm new to MVC and considering using an accordion. However, I'm facing issues as the accordion does not appear despite adding all necessary references for jquery accordion and creating the div. Here is my code: @{ ViewBag.Title = "Online Co ...

javascriptjqueryhtmlcssasp.net-mvc

Is it possible to create a single CSS style class that can be used for various section tiles on a website?

I am currently working on a website that includes different section titles such as About, Projects, Contact, and more. To make these titles stand out against the background image, I have decided to fill them with white. The text color of the titles is dar ...

htmlcss

Legend alignment issue in Firefox disrupting Flexbox functionality

My fieldset has a legend containing text and a button. I am attempting to use flexbox to right-align the button within the legend. This setup works correctly in Chrome, but encounters issues in Firefox. I have managed to replicate the problem with a simpl ...

htmlcssflexbox

Utilizing event delegation for JavaScript addEventListener across multiple elements

How can I use event delegation with addEventListener on multiple elements? I want to trigger a click event on .node, including dynamically added elements. The code I have tried so far gives different results when clicking on .title, .image, or .subtitle. ...

javascripthtmlcssevent-delegation

Guide on deactivating the HTML drawer layout on a website with Selenium using Java

I am currently working on automating a website and I have encountered a challenge with a drawer Menu Panel. My goal is to open the menu, verify certain elements within it, and then close or hide it. However, I am facing difficulty in closing/hiding this d ...

javahtmlseleniumautomation

What is the best way to retrieve information from a webpage I have created using an express backend and an HTML frontend

I designed a login page named index.html that prompts users to enter their email and password, followed by a submit button with the label "Log In": <input type="submit" value="Log In" id="loginbutton"> Within my app.js ...

javascripthtmlexpressfrontendbackend

Adjusting the placement of elements according to the size of the screen?

I'm facing a very specific issue with my web page design and I need some ideas on how to solve it. The current structure of the page looks like this: <div class="row"> <div id="home-img" class="col-6"> ******An Image Goes He ...

htmlcssbootstrap-4flexbox

Tips for inserting a pin into a designated location on an image map

Within my angular application, I have implemented an image map using the HTML usemap feature. Here is the code snippet: <img src="../../assets/floor2.jpg" usemap="#floor2Map"> <map name="floor2Map"> <area shape="pol ...

htmlcssangulartagsimagemap

The color of the link remains blue when using Firefox

Check out my website at kenastonchiropractic.com When viewing the site in Chrome, the "Home" link remains the same color as the other links and they all turn white when hovered over. However, in Firefox, the "Home" link stays blue even after being clicked ...

htmlcssfirefox

Move the dropdown selection above all DIV elements

Check out this link: Make sure to select an option from the dropdown menu. Also, some of the options are hidden behind other elements. I noticed that if I target .join-form and remove overflow: hidden, the layout of the page becomes distorted. Can anyon ...

htmlcsstwitter-bootstrap

JavaScript Button with the Ability to Input Text in a TextArea?

For instance, imagine a scenario where you click on a button and it then displays various options for you to select from. Whatever option you pick will be automatically inserted into the text area. ...

javascriptjqueryhtml

Ways to align two elements within the same level in the DOM?

Is it really impossible to have two elements render parallel to each other on the z-axis? Even with the same z-index, they are treated as being on different levels based on their order in the DOM. This can be a challenge when trying to display nearby eleme ...

htmlcssdom

Utilizing Capture Groups in CSS File for Regex Search and Replace

When it comes to extracting critical styles from a CSS file wrapped in a @critical rule, I run into some issues: @critical { .foo { ... } @media bar { ... } } The command I'm using for extraction involves sed search ...

cssregexbashsed

Click on the button to convert the content of the text area into a variable

Is there a way to capture all the text inside a textarea or input field as a variable upon button click using jQuery or JavaScript? The .select() function doesn't seem to achieve this, instead displaying numerous CSS properties when logged. What app ...

jqueryhtml

Flex items refusing to wrap in Firefox

I am facing an issue with my layout setup in different browsers. When I have a list of divs inside a flex div, it displays correctly in Chrome: However, in Firefox, it only shows a horizontal scroll with one line. Is there a way to prevent the forced hor ...

htmlcssflexbox

Incorrect formatting of HTML email on Outlook

Here is the code snippet I am using for an HTML email: <div style="background-color:red;max-width:600px;height:140px;margin-left:auto;margin-right:auto;"> <img src="https://via.placeholder.com/140x99" height="140" wi ...

htmlemailoutlookhtml-emailoutlook-2010