How can I place a button at the bottom-right of a container div?-CodePudding

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div >
  <div >
    <div >
      <div >Order #</div>
      <div >Order Name</div>
      <div >Quantity</div>
      <div >Price per pcs</div>
      <div >Total Price</div>
    </div>
    <div >
      <div >3</div>
      <div >Pencil</div>
      <div >5</div>
      <div >10</div>
      <div >50</div>
    </div>
    <div >
      <button><a href="#">VIEW MORE</a></button>
    </div>
  </div>
</div>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

 <div class = "back">
       

        <div >
            <div >
                <div >Order #</div>
                <div >Order Name</div>
                <div >Quantity</div>
                <div >Price per pcs</div>
                <div >Total Price</div>
            </div>
    
            <div >
                <div >3</div>
                <div >Pencil</div>
                <div >5</div>
                <div >10</div>
                <div >50</div>
            </div>

            <div class = "float-end">
                <button><a href="#">VIEW MORE</a></button>
            </div>
        </div>
       

    </div>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div >
  <div >
    <div >
      <div >Order #</div>
      <div >Order Name</div>
      <div >Quantity</div>
      <div >Price per pcs</div>
      <div >Total Price</div>
    </div>
    <div >
      <div >3</div>
      <div >Pencil</div>
      <div >5</div>
      <div >10</div>
      <div >50</div>
    </div>
    <div >
      <button><a href="#">VIEW MORE</a></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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div >
  <div >
    <div >
      <div >Order #</div>
      <div >Order Name</div>
      <div >Quantity</div>
      <div >Price per pcs</div>
      <div >Total Price</div>
    </div>
    <div >
      <div >3</div>
      <div >Pencil</div>
      <div >5</div>
      <div >10</div>
      <div >50</div>
    </div>
  </div>
  <div >
    <button><a href="#">VIEW MORE</a></button>
  </div>
</div>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

 <div class ="back">
       

        <div >
            <div >
                <div >Order #</div>
                <div >Order Name</div>
                <div >Quantity</div>
                <div >Price per pcs</div>
                <div >Total Price</div>
            </div>
    
            <div >
                <div >3</div>
                <div >Pencil</div>
                <div >5</div>
                <div >10</div>
                <div >50</div>
            </div>
          </div>
       <div >
       <button><a href="#">VIEW MORE</a></button>
               
            </div>

    </div>