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

Question

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>

html css

Answer 1

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

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 3

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 4

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 5

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.

Answer 6

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.

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

Answer №1

Answer №2

Answer №3

Similar questions

Adjusting Classes in JavaScript with jQuery

Is there a way to detect if JavaScript is disabled using a unique CSS selector?

Replace the default focus state using CSS or resetting it to a custom style

Creating a Circular Design with a Centered Line and Text Above and Below using Qualtrics (HTML/CSS/Java)

Placement of Buttons Inside a Division Tag

I am in search of a way to implement horizontal scrolling in Bootstrap 4

Fetching data from local JSON file is being initiated twice

I'm encountering an issue with my CSS image slider as it does not seem to be functioning properly on Google Chrome, yet

Is it possible to modify or delete the question mark in a URL?

How can I pass a variable to withStyles in Material UI?

Is it advisable for a component to handle the states of its sub-components within the ngrx/store framework?

Stylesheet for a React component

Hamburger Icon in Bootstrap Navbar-Brand is not aligned as expected

css content exceeds div boundaries

Tips for ensuring that each flexbox element fills up a single line

Tips for avoiding flickering in a background image when it is being changed

Joomla CSS styling malfunctioning

Issue with opacity transitions in Chrome on React application

Assign a CSS class to a specific option within a SelectField in a WTForms form

Core-pages with polymer core have no set height limit