Is there a way to position the button at the bottom right corner of my div box?

Having trouble positioning the button in the bottom-right corner of the parent div? I attempted using float: right;, but it ended up outside of the box. How can I keep the button within the box and align it to the bottom-right corner? If you have a solution, could you also explain why using float:right; causes the button to move out of the box?

.color {
  border: 1px solid black;
  width: 70%;
  margin: 10px auto;
  padding: 0 30px;
  position: relative;
}

.color p {
  display: inline-block;
  width: 200px;
  height: 80px;
  margin-right: 10px;
  text-align: center;
  line-height: 78px;
}

p.black {
  background: black;
  color: white;
}

p.gray {
  background: gray;
  color: white;
}

p.blue {
  background: blue;
  color: white;
}

p.white {
  border: 1px solid black;
}

.btn a {
  display: inline-block;
  border: 1px solid black;
  color: black;
  padding: 10px;
  margin: 10px 0;
  text-decoration: none;
  font-size: 90%;
  font-weight: 700;
  border-radius: 50px;
  text-align: center;
  box-shadow: inset 0 0 0 0 #000000;
  transition: ease-out .2s;
}

.color .btn a:hover {
  box-shadow: inset 133px 0 0 0 #000000;
  color: white;
}
<div class="color">
  <h1 class="heading">Color</h1>
  <p class="black">black</p>
  <p class="gray">gray</p>
  <p class="white">white</p>
  <p class="blue">blue</p>
  <div class="btn"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank">See more colors</a></div>
</div>

htmlcss

Answer №1

One simple solution to this problem is by using the text-align:right property

.color .btn {
text-align: right;
}


.color {
  border: 1px solid black;
  width: 70%;
  margin: 10px auto;
  padding: 0 30px;
  position: relative;
}

.color p {
  display: inline-block;
  width: 200px;
  height: 80px;
  margin-right: 10px;
  text-align: center;
  line-height: 78px;
}

p.black {
  background: black;
  color: white;
}

p.gray {
  background: gray;
  color: white;
}

p.blue {
  background: blue;
  color: white;
}

p.white {
  border: 1px solid black;
}

.color .btn {
text-align: right;
}


.btn a {
  display: inline-block;
  border: 1px solid black;
  color: black;
  padding: 10px;
  margin: 10px 0;
  text-decoration: none;
  font-size: 90%;
  font-weight: 700;
  border-radius: 50px;
  text-align: center;
  box-shadow: inset 0 0 0 0 #000000;
  transition: ease-out .2s;
}

.color .btn a:hover {
  box-shadow: inset 133px 0 0 0 #000000;
  color: white;
}
<div class="color">
  <h1 class="heading">Color</h1>
  <p class="black">black</p>
  <p class="gray">gray</p>
  <p class="white">white</p>
  <p class="blue">blue</p>
  <div class="btn"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank">See more colors</a></div>
</div>

Answer №2

If you're looking to position the button on the right side outside the border, here's an example:

.color {
  border: 1px solid black;
  width: 70%;
  margin: 10px auto;
  padding: 0 20px;
  position: relative;
}

.color p {
  display: inline-block;
  width: 200px;
  height: 80px;
  margin-right: 10px;
  text-align: center;
  line-height: 78px;
}

p.black {
  background: black;
  color: white;
}

p.gray {
  background: gray;
  color: white;
}

p.blue {
  background: blue;
  color: white;
}

p.white {
  border: 1px solid black;
}

.btn a {
  display: inline-block;
  float:right;
  border: 1px solid black;
  color: black;
  padding: 10px;
  margin: 10px 0;
  text-decoration: none;
  font-size: 90%;
  font-weight: 700;
  border-radius: 50px;
  text-align: center;
  box-shadow: inset 0 0 0 0 #000000;
  transition: ease-out .2s;
}


.color .btn a:hover {
  box-shadow: inset 133px 0 0 0 #000000;
  color: white;
}
<div class="color">
  <h1 class="heading">Color</h1>
  <p class="black">black</p>
  <p class="gray">gray</p>
  <p class="white">white</p>
  <p class="blue">blue</p>
  <div class="btn "><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" target="_blank">See more colors</a></div>
</div>

Answer №3

If you have correctly identified the parent element as .color and applied the position:relative property to it, then you are on the right track. All you need to do now is give your button the position:absolute property and use the bottom: value and right: value properties to set its position. By setting position:relative to the parent element, everything positioned absolutely inside it will be moved in relation to the parent, ensuring that it stays within the box.

Using float to position elements on a page is no longer considered a good practice. Instead, consider using flexbox or grid for more complex layouts. Float can cause elements to go outside of their containing box because it removes them from the document flow and disconnects them from other elements in the body tag.

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

Progress Bar HTML with PHP

Looking for a way to enhance user experience on a website form that utilizes PHP for data submission? How about incorporating a progress bar that visually indicates the form is processing in order to prevent users from clicking the button multiple times af ...

phphtmlcss

What is the method for extracting JavaScript code as data from a script tag?

I have a file external (let's say bar.js) function qux() {} Then in my webpage, I include it using the script tag: <script type="text/javascript" src="bar.js"></script> I am looking for a way to retrieve the JavaScript code from within ...

javascriptjqueryhtml

Why is a div nested inside an overflow: hidden; div not expanding to the full width of its content?

.container { white-space: nowrap; overflow: hidden; } .inner { width: 100%; } .list-item { display: 'inline-block', boxSizing: 'border-box', border: '3px solid black' } import React, { Component } from 're ...

javascriptcssreactjs

perfecting the styling of a tab management system

For reference, please check out the following link: http://jsfiddle.net/XEbKy/3/ In my design, I have organized two layers of tabs. The top layer consists of two tabs while the bottom layer has three tabs. My goal is to have all these tabs neatly enclosed ...

css

How can I prevent StateHasChanged() from affecting all open browsers in a Blazor Server-Side application?

Hey there, I'm new to Blazor but familiar with C#. This is my first time asking a question here so please bear with me. :) I am working on a Blazor server-side application where users can enter information and validate it based on server data. So far ...

c#htmlasync-awaitblazorblazor-server-side

Why isn't the button border displaying the color I assigned to it?

After setting a border color to my button, it's not displaying the color when I click on it. Instead, it's showing a different color. How can I resolve this issue? I need some assistance with setting the background of my button to match the imag ...

htmlcssfont-awesome

the live binding feature fails to function properly once an append operation is executed

Could someone please explain to me why adding an even number of squares causes the bind event to stop working? $("#add").click(function(){ $("#container").append("<div class=\"square\">xxxxxx</div> ").bind("click",function(e) { ...

jqueryhtmlcss

Extension Overlay for Chrome

I'm currently working on developing a Chrome extension, but I'm encountering some confusion along the way. Despite researching online, I keep receiving conflicting advice and haven't been able to successfully implement any solutions. That&ap ...

javascriptjqueryhtmlcssgoogle-chrome

Create a variety of unique images without using the same one more than once

I'm currently developing my first Javascript game, but I've hit a roadblock.. I am trying to create a game that displays random images without repeating them. Each image should be accompanied by a random number between 4 and 10. The code I have w ...

javascripthtml

Creating a list element after clicking in ReactJS is achieved by using event handlers in

I have buttons and inputs that I want to use to generate a list item in the ul section at the end of my code. However, despite adding functions to handle this feature, it still doesn't work as intended. import { useState } from 'react'; impo ...

htmlcssreactjs

"Implementing Python code to dynamically add a class to HTML based on specific conditions

Here is the code snippet I'm currently using for the header section across all templates on my website. I include it in each template using the following line of code: {% include 'header.html' %} I am working on a way to add the class "acti ...

htmldjangodjango-templatesjinja2

Looking for a way to prevent a div element from scrolling in JQuery Mobile?

Here is my implementation: http://jsfiddle.net/coderslay/Lhb5Y/ I have content structured like this: <div data-role="content"> <div><!--Contains a button --></div> <div><ul>..<!--Contains a list -->...</ ...

jqueryhtmlcssjquery-mobile

What is the best way to place a list within a <div> element?

There is a <div> with an image in the background. I now want to include a list within that div, but I'm having trouble positioning it. Check out this image for reference In the image above, you can see the background and the list, but I'm ...

htmlcss

"Utilize the hover functionality in React JS to track the mouse movement

I'm currently facing an issue with a design that involves a 6-column grid and text placed in front of it. The requirement is that when I hover over the text, the background of the corresponding grid column should change to an image. While this functio ...

cssreactjsnext.jstailwind-css

I am interested in designing a dynamic wave-themed background for a menu

I am looking to create a menu background that ripples like a wave when hovered over. Check out the first example here: https://i.sstatic.net/LoOWM.png I want to achieve the same effect. Can anyone help me with how I can do this? <ul> <li>likk ...

javascripthtmlcsssvgbootstrap-4

What are some effective methods to completely restrict cursor movement within a contenteditable div, regardless of any text insertion through JavaScript?

Recently, I encountered the following code snippet: document.getElementById("myDiv").addEventListener("keydown", function (e){ if (e.keyCode == 8) { this.innerHTML += "&#10240;".repeat(4); e.preventDefault(); } //moves cursor } ...

javascripthtmlcursor

Tips for changing the size of a div using an absolute div position

Is it possible for the #parent div to resize based on the dimensions of the #child div (if the #child div is using position:absolute;)? Similar to how the #t_parent table resizes according to the size of the #t_child table. <div id="parent" style="pos ...

htmlcss

Using Javascript to Change Background Color on Button Click

The button press does not result in a change of the background color. What could be causing this issue? var body = document.getElementsByTagName("body"); var bgbutton = doucument.getElementById("bgchange"); bgbutton.onclick = function() { body.style.b ...

javascripthtmlcss

What is the most common method for creating a dropdown menu for a website's navigation?

Is there a common approach to creating an interactive drop-down navigation menu in the industry? I have searched on Google and found multiple methods, but as a student working on my first big web project, I am hoping to find a standard practice. I don&apo ...

javascripthtmlcssdrop-down-menustandards

Struggle with the background div menu

I am trying to create a menu with a background color, but when I use "background" or "background-color" on the div that contains my menu, I can't see any color. It's frustrating because I know it should be working.. Here is the HTML : <head ...

htmlcssmenubackgroundjsfiddle