CODEWITHSUNDEEP
htmlcss
ItFreak
ItFreak

Reputation: 2369

Make div responsive in a fixed parent div

I have the following HTML/CSS/JS:

HTML:

<div id="blockcart-wrapper">
  <div class="blockcart cart-preview">
    <div class="header">
      <a rel="nofollow" href="#">
        <img class="cart-icon" src="https://via.placeholder.com/20x20" onclick="toggleClass()">

      </a>
    </div>
    <div class="body" id="shopping-cart-body">
      <div class="close"><a href="" onclick="toggleClass()">X</a></div>
      <ul>
      </ul>
      <div class="shopping-cart-header">CART</div>
      <div class="products-container">
        <div class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/250x200"></span>
          <div class="product-details">
            <div class="name-header">NAME</div>
            <div class="product-quantity-details">
              <span class="quantity">QTY</span>
              <span class="color-circle"></span>
              <span class="color">COLOR</span>
            </div>
            <div class="price-open">
              <span class="product-price">XX.XX</span>
              <span class="product-link"><a href="#">öffnen</a></span>
            </div>
          </div>
        </div>

        <div class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/250x200"></span>
          <div class="product-details">
            <div class="name-header">NAME</div>
            <div class="product-quantity-details">
              <span class="quantity">QTY</span>
              <span class="color-circle"></span>
              <span class="color">COLOR</span>
            </div>
            <div class="price-open">
              <span class="product-price">XX.XX</span>
              <span class="product-link"><a href="#">öffnen</a></span>
            </div>
          </div>

      </div>
      <div class="checkout">
        <div class="taxes">
          <span class="label">Taxes</span>
          <span class="value">0</span>
          <hr>
        </div>
        <div class="cart-total">
          <span class="label">Total</span>
          <span class="value">0</span>
        </div>
        <button><a href="#">Checkout</a></button>
      </div>
    </div>
  </div>
</div>

CSS: 

.cart-preview {
    float: right;
    position: relative;
}

.cart-preview a,
.cart-preview a:hover,
.cart-preview a:visited {
    text-decoration: none;
    color: inherit;
}

.cart-preview .header {
    display: block;
    font-weight: bold;
    border: 1px solid #808080;
    padding: 5px;
    cursor: pointer;
    background-color: #fff;
}

.cart-preview .body {
    visibility: visible;
    position: fixed;
    height: 100%;
    top: 0;
    width: 400px;
    z-index: 100;
    background-color: #fff;
    transition: right 1s linear;
    right: -400px;
}

.cart-preview .body.open {
    visibility: visible;
    transition: right 1s linear;
    right: 0px;
}

.cart-preview .body .shooping-cart-body {
    font-family: 'sans-serif';
    width: 100%;
    text-align: center;
}

.cart-preview .body .close{
    float: left;
}
.cart-preview .body .shopping-cart-header{
    font-family: 'IBMPlexSans-Bold.woff'
    font-size: 45px;
    margin-top: 40px;
    text-align: center;
}
.cart-preview .body .products-container {
    position: relative;
    height: 100%;
    width: 100%;
    margin-top: 15px;
    overflow: auto;
}

.product {
  position: relative;
    display: flex;
}

.product>div {
    width: 50%;
}

.product .prodcut-image {
    margin-right: 20px;
}

.product img {
    width: 100%;
    height: auto;
}

.cart-preview .body .products-container>.product-image {
    position: absolute;
    width: 50%;
    left: 0;
}

.cart-preview .body .products-container>.product-details {
    position: relative;
    width: 50%;
    float: left;
}

.name-header{
  position: absolute;
  top: 0;
}
.cart-preview .body .products-container .color-circle:before {
    content: ' \25CF';
    font-size: 30px;
}

.cart-preview .body .checkout {
    position: absolute;
    top: 80%;
    height: 100%;
    width: 100%;
    background: gray;
}

.cart-preview .product{
  margin-top: 10px;
}
.product-quantity-details{
  position: absolute;
  top: 25%;
    align-items: center;
    display: inline-flex;
}

.product-quantity-details{
  position: absolute;
  top: 40%;
}

.product-quantity-details .quantity{
    border: 2px solid black;
    margin-right: 10px;
    background: white;
    width: 36px;
    height: 36px;
    font-size: 15px;
    line-height: 15px;
    color: black;
}

.name-header{
  position: absolute;
  top: 0;
}

.price-open{
  position: absolute;
  bottom: 0;
}

.product-quantity-details .quantity:after{
    content: 'x'
}

.cart-preview .body .checkout>button {
    position: absolute;
    background: black;
    text-align: center;
    vertical-align: middle;
    color: white;
    top: 15%;
    line-height: 14px;
    bottom: 50px;
    height: 20px;
    width: 205px;
    left: 25%;
}

.checkout .taxes{
    position: absolute;
    top: 5%;
}

.checkout .cart-total{
    position: absolute;
    top: 10%;
    float: left;
}

.cart-total .value {
    float: right;
}
.cart-total .value:after {
    content:'€'
}

.cart-total .label {
    float: left;
}

.taxes .value {
    float: right;
}

.taxes .label {
    float: left;
}

.cart-preview.cart-overview {
    width: 100%;
    position: inherit;
}
.cart-preview.cart-overview .body {
    display: block;
    position: inherit;
    width: 100%;
}
.cart-preview .header > :first-child {
    float: left;
}
.cart-preview .header > :last-child {
    float: right;
}
.cart-preview .header::after,
.cart-preview .cart-totals > div::after {
    clear: both;
    content: "\A0";
}
.cart-preview .body {
    border: 1px solid #808080;
    padding: 2px;
}

JS: 

function toggleClass() {
  document.getElementById('shopping-cart-body').classList.toggle('open');
}

Now I am trying to align the div with the class checkout relative to the fixed parent and the elements inside the div (the two text divs and the button) absolute to the checkout-div, so the checkout div always has 20% of the height and the elements inside align accordingly. I would like to position the elements inside absolute, so the button has a margin from the bottom of for example 30px. However, I did not manage to make this work with position: relative for the .checkout div.
I summed this up in a codepen: https://codepen.io/anon/pen/BOLpdG

Can someone help me to align the div?

sketch

Upvotes: 0

Views: 889

Answers (1)

Християн Христов
Християн Христов

Reputation: 3588

Hello here is a working version, of the thing that you want to achive (i hope i got the desired effect right).

I changed some css in .cart-preview .body .checkout.car, . .cart-preview .body .checkout>button, .checkout .taxes, .checkout .cart-total. Also i put out the checkout <div> outside the products container + i added one more <div> with the .meta-data-wrap class.

Let me give you just few pointer for the feature. Check out all different types of responsive length types : vh, vw, rem, etc. Also see the calc function which is very handy (those are things i used to modify your css). Also when you are structuring a html component (in your case the sidebar-cart), try to separate each logical part in it's own container, so that it is easier to manipulate and manage (like i had did in the demo, separating the 'checkout' block from the products-container).

PS. Open the demo in full screen :D

function toggleClass() {
  document.getElementById('shopping-cart-body').classList.toggle('open');
} 
.cart-preview {
    float: right;
    position: relative;
}

.cart-preview a,
.cart-preview a:hover,
.cart-preview a:visited {
    text-decoration: none;
    color: inherit;
}

.cart-preview .header {
    display: block;
    font-weight: bold;
    border: 1px solid #808080;
    padding: 5px;
    cursor: pointer;
    background-color: #fff;
}

.cart-preview .body {
    visibility: visible;
    position: fixed;
    height: 100%;
    top: 0;
    width: 400px;
    z-index: 100;
    background-color: #fff;
    transition: right 1s linear;
    right: -400px;
}

.cart-preview .body.open {
    visibility: visible;
    transition: right 1s linear;
    right: 0px;
}

.cart-preview .body .shooping-cart-body {
    font-family: 'sans-serif';
    width: 100%;
    text-align: center;
}

.cart-preview .body .close{
    float: left;
}
.cart-preview .body .shopping-cart-header{
    font-family: 'IBMPlexSans-Bold.woff'
    font-size: 45px;
    margin-top: 40px;
    text-align: center;
}
.cart-preview .body .products-container {
    height: calc(73vh - 20px);
    width: 100%;
    margin-top: 15px;
    overflow: auto;
}

.product {
  position: relative;
    display: flex;
}

.product>div {
    width: 50%;
}

.product .prodcut-image {
    margin-right: 20px;
}

.product img {
    width: 100%;
    height: auto;
}

.cart-preview .body .products-container>.product-image {
    position: absolute;
    width: 50%;
    left: 0;
}

.cart-preview .body .products-container>.product-details {
    position: relative;
    width: 50%;
    float: left;
}

.name-header{
  position: absolute;
  top: 0;
}
.cart-preview .body .products-container .color-circle:before {
    content: ' \25CF';
    font-size: 30px;
}

.cart-preview .body .checkout {
    position: absolute;
    bottom: 0;
    height: 20vh;
    width: 100%;
    background: gray;
}

.cart-preview .product{
  margin-top: 10px;
}
.product-quantity-details{
  position: absolute;
  top: 25%;
    align-items: center;
    display: inline-flex;
}

.product-quantity-details{
  position: absolute;
  top: 40%;
}

.product-quantity-details .quantity{
    border: 2px solid black;
    margin-right: 10px;
    background: white;
    width: 36px;
    height: 36px;
    font-size: 15px;
    line-height: 15px;
    color: black;
}

.name-header{
  position: absolute;
  top: 0;
}

.price-open{
  position: absolute;
  bottom: 0;
}

.product-quantity-details .quantity:after{
    content: 'x'
}

.cart-preview .body .checkout>button {
    position: absolute;
    background: black;
    text-align: center;
    vertical-align: middle;
    color: white;
    line-height: 14px;
    bottom: 50px;
    height: 20px;
    width: 205px;
    left: 25%;
}

.meta-data-wrap{
    display: flex;
    flex-direction: column;
    width: 20%;
}


.cart-total .value {
    float: right;
}
.cart-total .value:after {
    content:'€'
}

.cart-total .label {
    float: left;
}

.taxes .value {
    float: right;
}

.taxes .label {
    float: left;
}

.cart-preview.cart-overview {
    width: 100%;
    position: inherit;
}
.cart-preview.cart-overview .body {
    display: block;
    position: inherit;
    width: 100%;
}
.cart-preview .header > :first-child {
    float: left;
}
.cart-preview .header > :last-child {
    float: right;
}
.cart-preview .header::after,
.cart-preview .cart-totals > div::after {
    clear: both;
    content: "\A0";
}
.cart-preview .body {
    border: 1px solid #808080;
    padding: 2px;
}
  <div class="blockcart cart-preview">
    <div class="header">
      <a rel="nofollow" href="#">
        <img class="cart-icon" src="https://via.placeholder.com/20x20" onclick="toggleClass()">

      </a>
    </div>
    <div class="body" id="shopping-cart-body">
      <div class="close"><a href="" onclick="toggleClass()">X</a></div>
      <ul>
      </ul>
      <div class="shopping-cart-header">CART</div>
      <div class="products-container">
        <div class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/250x200"></span>
          <div class="product-details">
            <div class="name-header">NAME</div>
            <div class="product-quantity-details">
              <span class="quantity">QTY</span>
              <span class="color-circle"></span>
              <span class="color">COLOR</span>
            </div>
            <div class="price-open">
              <span class="product-price">XX.XX</span>
              <span class="product-link"><a href="#">öffnen</a></span>
            </div>
          </div>
        </div>
        
        
        <div class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/250x200"></span>
          <div class="product-details">
            <div class="name-header">NAME</div>
            <div class="product-quantity-details">
              <span class="quantity">QTY</span>
              <span class="color-circle"></span>
              <span class="color">COLOR</span>
            </div>
            <div class="price-open">
              <span class="product-price">XX.XX</span>
              <span class="product-link"><a href="#">öffnen</a></span>
            </div>
          </div>
        </div>
        
        <div class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/250x200"></span>
          <div class="product-details">
            <div class="name-header">NAME</div>
            <div class="product-quantity-details">
              <span class="quantity">QTY</span>
              <span class="color-circle"></span>
              <span class="color">COLOR</span>
            </div>
            <div class="price-open">
              <span class="product-price">XX.XX</span>
              <span class="product-link"><a href="#">öffnen</a></span>
            </div>
          </div>
        </div>
        
        <div class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/250x200"></span>
          <div class="product-details">
            <div class="name-header">NAME</div>
            <div class="product-quantity-details">
              <span class="quantity">QTY</span>
              <span class="color-circle"></span>
              <span class="color">COLOR</span>
            </div>
            <div class="price-open">
              <span class="product-price">XX.XX</span>
              <span class="product-link"><a href="#">öffnen</a></span>
            </div>
          </div>
        </div>
        
        <div class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/250x200"></span>
          <div class="product-details">
            <div class="name-header">NAME</div>
            <div class="product-quantity-details">
              <span class="quantity">QTY</span>
              <span class="color-circle"></span>
              <span class="color">COLOR</span>
            </div>
            <div class="price-open">
              <span class="product-price">XX.XX</span>
              <span class="product-link"><a href="#">öffnen</a></span>
            </div>
          </div>
        </div>
        
        <div class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/250x200"></span>
          <div class="product-details">
            <div class="name-header">NAME</div>
            <div class="product-quantity-details">
              <span class="quantity">QTY</span>
              <span class="color-circle"></span>
              <span class="color">COLOR</span>
            </div>
            <div class="price-open">
              <span class="product-price">XX.XX</span>
              <span class="product-link"><a href="#">öffnen</a></span>
            </div>
          </div>

      </div>
  
        </div>
        <div class="checkout">
          <div class="meta-data-wrap">
            <div class="taxes">
          <span class="label">Taxes</span>
          <span class="value">0</span>
        </div>
        <div class="cart-total">
          <span class="label">Total</span>
          <span class="value">0</span>
        </div>
          </div>
        <button><a href="#">Checkout</a></button>
      </div>
    </div>
</div>

Upvotes: 2

Related Questions