I'm throwing in the towel on CSS, I just can't seem to get a simple button to sit at the bottom of

Struggling to position a button at the bottom of a div? I've tried everything I could find online but nothing seems to work!

Here's my code:

<ion-col >
          <div id="secondCol">
          <ion-text> {{card.cardPoints}} = {{card.cardValue}} € </ion-text>
<!--          <ion-text>{{userPercentageCards[i]}} %</ion-text>-->
            <div id="useButton">
              <ion-button  *ngIf="userPercentageCards[i] >=100" style="bottom: 0"> Usar Cartão!</ion-button>
            </div>

          </div>
        </ion-col>

CSS:

#secondCol{
 position: absolute;
  width: 100%;
  height: 100%;
}

#useButton{
   position: relative;

  bottom: 0;
 }

No matter what I try, the button refuses to budge from its current position. Feeling frustrated with CSS and almost ready to give up!

Answer №1

Give this a shot! ;)

#rightColumn{
  display: flex;
  justify-content: center;
  align-items: center;
}

#clickMeButton{
  position: fixed;
  bottom: 20px;
}

Answer №2

To achieve the desired layout, set the parent element as relative and the child as absolute:

#secondCol {
    position: relative;
    width: 100%;
    height: 100%;
}
#useButton {
    position: absolute;
    bottom: 0;
}

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

Update the html() function to include any content that has been typed into a

I have a webpage structured like this: <div id="report_content"> Some information <textarea name="personal"></textarea> <b>Other information</b> <textarea name="work"></textarea> </div> Whe ...

Utilizing the entire right side of a browser window, the Bootstrap carousel is displayed in full view

Trying to make the bootstrap carousel take up the entire display of the right side of a browser window. To achieve this, the margins of the carousel need to be adjusted so that the image is positioned in the center of the right side with maximum width (5/ ...

The jquery script for the dynamic remove button is malfunctioning

I have successfully implemented code to display dynamic controls using jQuery. Below is the working code: <script type="text/javascript"> $(document).ready(function() { $("input[value='Add']").click(function(e){ e. ...

Utilize jQuery setInterval to dynamically add and remove classes on elements

My goal is to display my image in a way that resembles waving flames. I decided to achieve this effect by using two layers (flame tongues) stacked on top of each other in the same position. My initial approach was to hide one flame tongue while showing the ...

When attempting to use the ResponsiveSlides plugin, the functionality of 'Image links' seems to be disabled in the Chrome browser

While everything is functioning perfectly in Firefox and IE, I've encountered an issue with Chrome. It only works after right-clicking and inspecting the element; once I close the Inspector, it stops working - displaying just an arrow cursor as if the ...

Utilizing JavaScript to implement conditional if-else statements on CSS properties

I am trying to implement conditions on CSS properties in JavaScript. What is the most efficient approach to achieve this? <html> <head> <title>TOOLTIP USING JAVASCRIPT</title> <style> span{ curso ...

Center-aligned navigation bar with all elements except for one positioned on the right side

Currently, I am attempting to center 4 elements next to each other while having one element float to the right using a flex-based solution. The ideal outcome would be for the floated element to remain in place when resizing the browser, with the other 4 e ...

What steps can be taken to obtain the fully computed HTML rather than the source HTML?

Is there a way to access the final computed HTML of a webpage that heavily relies on javascript to generate its content, rather than just the source HTML? For example, if a page contains script functions that dynamically generate HTML, viewing the page sou ...

Assistance with Php: Need help with remote addresses (I'm a complete beginner in php, apologies)

Hello, I have encountered an issue with some PHP code from OpenCart that is automatically inserting <br /> and commas "," into the addresses of all my customers in the order notification emails. This unintended addition is creating problems with the ...

What is the process for transferring data (BLOB datatype) to a different table?

I need assistance with transferring data from one blob to another table in the same data type blob. However, I encountered an error message regarding SQL syntax: You have an error in your SQL syntax; check the manual that corresponds to your MariaDB serv ...

"Master the art of creating a curved circular arrow using a combination of HTML, SVG, D3.js

I am looking to design an SVG circle with a fading stroke that blends into the background and features an arrow at one end. The goal is for the ring to fade out completely right above the arrow, similar to the visual reference provided in the image.view ex ...

Connecting images and text from a distance

After days of researching this topic, I have not found any solutions that align exactly with what I am trying to achieve. I believe it should be a simple task using just HTML and CSS, but I seem to be facing some difficulties. Initially, my goal was to ma ...

How to display HTML on top without altering the viewport in React?

I am trying to display a component <Top /> above another component <Bottom /> in React. The code structure is as follows: ... [top, setTop] = useState(false); [bottom, setBottom] = useState(true); ... return ( <div> top && (< ...

Repairing a CSS file for Internet Explorer versions 7, 8, and 9

Does anyone have experience with troubleshooting HTML5 CSS3 layouts across different browsers? I recently created a website layout from scratch that looks perfect in Firefox 5, Safari 5.1 and Chrome 12 on Mac. However, when using tools like Adobe BrowserL ...

When selecting filter options, the posts/images now overlap before transitioning into a masonry view upon resizing the window

I have implemented a filter on my posts to arrange them based on popularity, style, and country. Screenshots: Screenshot 1: Everything looks good when the page loads, displaying all posts/images properly in masonry layout. Screenshot 2: Issue occurs whe ...

A strategy for concealing the selected button within a class of buttons with Vanilla JS HTML and CSS

I have encountered a challenging situation where I am using JavaScript to render data from a data.json file into HTML. Everything seems to be functioning correctly, as the JSON data is being successfully rendered into HTML using a loop, resulting in multip ...

Inquiry into the use of Jquery.ajax()

Hey there, I'm curious about using Jquery Ajax to retrieve a numeric value from a website. Any suggestions on where I should begin? Any advice would be greatly appreciated. Thanks in advance! Best regards, SWIFT ...

Tips for creating a consistent header and footer across an HTML CSS web application

My previous projects involved using ASP.NET MVC and utilizing @Html.Partial("_header") to incorporate common static HTML across different pages. However, my current project is a pure HTML CSS and JS web app with no server-side technology. The la ...

Tips for aligning the first element in an inline-block list item horizontally

I'm working on a list with horizontal scroll functionality to allow users to view content by scrolling. I have successfully implemented this, but I'm facing a couple of challenges that I need help with: I want the first item in the list to alwa ...

Selecting the initial item of every nested tag repeatedly for a total of n times

Is there a way to stop coloring elements after 'tue 7-1-1' using CSS? I am only allowed to manipulate the first child of every element up until a certain point through CSS, without modifying the existing code. Note: Span elements are nested wit ...