1

I'm struggling with finding a way to move the button to the right-bottom of the div parent box. I tried float: right; then, it is moved to the outside of the div box. How can I move the button within the box to the right-bottom? and If you know, please explain why float:right; makes button 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>
Aalexander
  • 4,987
  • 3
  • 11
  • 34
jlee4641
  • 41
  • 5

3 Answers3

2

There are many solutions for this. The easiest here is to say text-align:right

.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>
Aalexander
  • 4,987
  • 3
  • 11
  • 34
  • Thank you so much! But could you explain why I had to use text-align property in here? – jlee4641 Feb 13 '21 at 10:36
  • You can also use float: right in *.color .btn* but I don't think that is what you want it would set the button next to your paragraphs. Here is a good article to understand floats https://css-tricks.com/almanac/properties/f/float/#:~:text=This%20is%20the%20initial%20value,float%20direction%20of%20its%20parent. – Aalexander Feb 13 '21 at 10:38
  • I see I see. Just one more thing, how do I use code snippet ?? Sorry I'm new to here – jlee4641 Feb 13 '21 at 10:39
  • You can go in your post and click the icon next to the add image icon. In the window which opens up you have 4 boxes for html css javascript and the output area. Copy paste your code in there and then you can click run – Aalexander Feb 13 '21 at 10:41
2

This example if you want to put the button on the right outside the border:

.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>
2

If I'm seeing right your parent element is .color? than u did good thing that you gave it postion:relative property, now all u had to to is to give your button position:absolute and use property bottom: value and right: value to set it's position. When u set postion:relative to the parent element everything postioned absolutly inside it will be moved in relation to the parent so it will never go outside the box :D

And using float to position smth on the page is not good approach anymore, check out flexbox or grid(for more complex layouts). Float makes it go out of the box because it takes it out of the document flow and it's no longer related to any other boxes in body tag :D

Konrad
  • 153
  • 1
  • 11