Putting a button in the bottom-right of a page - html

Question

How can I put this View More button in the bottom-right of the container? I am having a hard time on putting the view more button on the bottom right of the 'back' div.
.back {
border: #6ACEBC 4px solid;
margin: 0 20px;
border-radius: 15px;
max-width: 100%!important;
min-height: 200px;
}
.content {
max-width: 60%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="back">
<div class="content">
<div class="row ps-3 text-center">
<div class="col">Order #</div>
<div class="col">Order Name</div>
<div class="col">Quantity</div>
<div class="col">Price per pcs</div>
<div class="col">Total Price</div>
</div>
<div class="row ps-3 text-center">
<div class="col">3</div>
<div class="col">Pencil</div>
<div class="col">5</div>
<div class="col">10</div>
<div class="col">50</div>
</div>
<div class="float-end">
<button>VIEW MORE</button>
</div>
</div>
</div>

Answer 1

Use absolute positioning to place the button on the bottom right of the container. The container needs to be position: relative; to get the context of the button in the right place.
.back {
border: #6ACEBC 4px solid;
margin: 0 20px;
border-radius: 15px;
max-width: 100%!important;
min-height: 200px;
background-color: darkorange;
position: relative;
}
.content {
max-width: 60%;
}
button {
position: absolute;
bottom: 10px;
right: 10px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class = "back">
<div class="content">
<div class="row ps-3 text-center">
<div class="col">Order #</div>
<div class="col">Order Name</div>
<div class="col">Quantity</div>
<div class="col">Price per pcs</div>
<div class="col">Total Price</div>
</div>
<div class="row ps-3 text-center">
<div class="col">3</div>
<div class="col">Pencil</div>
<div class="col">5</div>
<div class="col">10</div>
<div class="col">50</div>
</div>
<div class = "float-end">
<button>VIEW MORE</button>
</div>
</div>
</div>

Answer 2

You can use position: absolute. Create a new containing block with position: relative on the parent however this takes the button outside of the flow so you may end up with other elements clashing with it (e.g. the button appearing over text content).
.back {
border: #6ACEBC 4px solid;
margin: 0 20px;
border-radius: 15px;
max-width: 100%!important;
min-height: 200px;
position: relative; /* create new containing block */
}
.content {
max-width: 60%;
}
.view-more {
position: absolute;
bottom: 1rem;
right: 1rem;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="back">
<div class="content">
<div class="row ps-3 text-center">
<div class="col">Order #</div>
<div class="col">Order Name</div>
<div class="col">Quantity</div>
<div class="col">Price per pcs</div>
<div class="col">Total Price</div>
</div>
<div class="row ps-3 text-center">
<div class="col">3</div>
<div class="col">Pencil</div>
<div class="col">5</div>
<div class="col">10</div>
<div class="col">50</div>
</div>
<div class="view-more">
<button>VIEW MORE</button>
</div>
</div>
</div>
The other way is to move your view-more div outside the content div and then use display: flex to move it to the bottom right hand corner. We make sure the div fills the parent div. This will always make sure the table above and the button do not clash.
.back {
border: #6ACEBC 4px solid;
margin: 0 20px;
border-radius: 15px;
max-width: 100%!important;
min-height: 200px;
display: flex; /* make this a flex container */
flex-direction: column; /* make the flex divs stack on top of each other rather than side by side */
}
.content {
max-width: 60%;
}
.view-more {
flex-grow: 1; /* make the bottom div grow to fill the container */
display: flex; /* make this a flex container also */
justify-content:flex-end; /* put the button to the right hand side of the parent div */
align-items: flex-end; /* put the button at the bottom of the div */
padding:0.5rem; /* put a bit of padding round it to put some space between the green border and the button */
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="back">
<div class="content">
<div class="row ps-3 text-center">
<div class="col">Order #</div>
<div class="col">Order Name</div>
<div class="col">Quantity</div>
<div class="col">Price per pcs</div>
<div class="col">Total Price</div>
</div>
<div class="row ps-3 text-center">
<div class="col">3</div>
<div class="col">Pencil</div>
<div class="col">5</div>
<div class="col">10</div>
<div class="col">50</div>
</div>
</div>
<div class="view-more">
<button>VIEW MORE</button>
</div>
</div>

Answer 3

Have you tried adding "position: relative" to the container and then positioning the button absolutely?
.back {
border: #6ACEBC 4px solid;
margin: 0 20px;
border-radius: 15px;
max-width: 100%!important;
min-height: 200px;
position: relative;
}
.content {
max-width: 60%;
font-size: 5px;
}
.float-end {
position: absolute;
right: 0;
bottom: 0;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class ="back">
<div class="content">
<div class="row ps-3 text-center">
<div class="col">Order #</div>
<div class="col">Order Name</div>
<div class="col">Quantity</div>
<div class="col">Price per pcs</div>
<div class="col">Total Price</div>
</div>
<div class="row ps-3 text-center">
<div class="col">3</div>
<div class="col">Pencil</div>
<div class="col">5</div>
<div class="col">10</div>
<div class="col">50</div>
</div>
</div>
<div class="float-end">
<button>VIEW MORE</button>
</div>
</div>