Twitter Bootstrap Question posted in

Make div stay in one place no matter how matter the height of the page-Twitter bootstrap

I have two div’s that I want to have equal height. The left div has dynamic content which can expand vertically with any number of inner div’s. The right div has one inner div that needs to stay at the top and still be visible no matter how far you scroll down. Please look at this codepen

#shipping_policies {
    border: 1px solid #000000;
    padding: 5px;
}

#shipping_policies a {
    display: block;
    font-size: .9em;
    text-decoration: underline;
}

.checkout .card-header {
    background-color: #f2f2f2 !important;
}

.checkout button {
    color: #000;
    font-size: 0.6em;
}

.square1 {
    height: 100px;
    width: 100px;
    background-color: red;
    line-height: 100px;
    text-align: center;
}

.square1 p {
    color: #FFFFFF;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container mt-5 h-auto">
  <div class="" style="">
    <div class="col-6 border-danger float-left d-inline-block mr-1" style="background-color: #ffffff;">
      <div style="width: 150px;" class="py-2 d-inline">
        <div class="float-left">
          <img src="https://via.placeholder.com/228x150" alt="" class="mt-2 mb-5" /><br>
          <a class="mt-4" style="border-radius: 0; width: 150px; margin-bottom: 10px;" id="del-item" href="#">X REMOVE</a>
        </div>
        <div class="float-left ml-3 mt-1">
          <p class="px-0 mb-0">short_desc</p>
          <p class="px-0 mb-0">UOM</p>
          <label for="quantity" style="margin-bottom: 0; font-weight: bold; margin-top: 20px;">QTY</label><br>
          <input type="text" class="quantity" name="quantity" value="1">
        </div>
      </div>
      <div style="position: absolute; right: 10px; bottom: 1px;">
        <p class="mb-0" style="font-weight: bold; font-size: 1.1em; color: #990000;">$399.99</p>
      </div>
    </div>
    <div class="col-6 border-danger float-left d-inline-block mr-1" style="background-color: #ffffff;">
      <div style="width: 150px;" class="py-2 d-inline">
        <div class="float-left">
          <img src="https://via.placeholder.com/228x150" alt="" class="mt-2 mb-5" /><br>
          <a class="mt-4" style="border-radius: 0; width: 150px; margin-bottom: 10px;" id="del-item" href="#">X REMOVE</a>
        </div>
        <div class="float-left ml-3 mt-1">
          <p class="px-0 mb-0">short_desc</p>
          <p class="px-0 mb-0">UOM</p>
          <label for="quantity" style="margin-bottom: 0; font-weight: bold; margin-top: 20px;">QTY</label><br>
          <input type="text" class="quantity" name="quantity" value="1">
        </div>
      </div>
      <div style="position: absolute; right: 10px; bottom: 1px;">
        <p class="mb-0" style="font-weight: bold; font-size: 1.1em; color: #990000;">$399.99</p>
      </div>
    </div>
  </div>
  <div class="" style="">
    <div class="col-4 border-danger float-left ml-4" style="background-color: #f2f2f2; border-radius: 4px;">
      <div class="w-100 mt-2">
        <span>Subtotal</span>
        <p class="float-right">$399.99</p>
      </div>
      <div class="w-100 mt-4">
        <h4 style="font-weight: bold; margin-bottom: 0">Estimated Total</h4>
        <p class="float-right" style="font-size: large; font-weight: bold;">$399.99</p>
        <p class="" style="font-size: smaller">Tax Calculated at Checkout</p>
      </div>
      <hr style="height: 2px; color: #000; background: #000;" />
      <div class="w-100">
        <input class="w-100" style="height: 40px;" type="text" id="promo" name="promo" placeholder="Enter Promo Code" />
        <button style="position: absolute; right: 8%; bottom: 34%; background-color: #0066CC; color: #FFFFFF;">Apply Now</button>
      </div>
      <hr style="height: 5px; color: #000; background: #0066CC;" />
      <a class="w-100 mb-2 btn" style="background-color: #febd69;" href="http://groves.local/product/checkout">CHECKOUT</a>
    </div>
    <div class="float-right" style="margin-right: 15%; margin-top: 2%; width: 340px;">
      <h5 style="font-weight: bold;">Shipping &amp; Policies</h5>
      <div id="shipping_policies">
        <a href="#">Shipping</a>
        <a href="#">Policies</a>
      </div>
    </div>
  </div>
<div>

This code snippet is where I have gotten so far any help is greatly appreciated.

Tags:

2

Answers


  1. 0

    Use position fixed. Position fixed makes it so that an element stays at it’s specified place even if the user scrolls up or down.

    Login or Signup to reply.
  2. 0

    Added a class .fixed with position:fixed to the element that should stay on one place, also fixed your html layout. See https://codepen.io/anon/pen/joYmvV?editors=1100

    Update:
    You can also add position:sticky instead of position:fixed – It produces a nice effect. See the updated code https://codepen.io/anon/pen/joYmvV?editors=1100

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search