set a width of fixed positioned div relative to its sibling div and parent?
2 min readSep 28, 2018
I wanted to set a width of a fixed div as the image resizes
let’s have a look at the h&m website product page i’ve been examining
https://www2.hm.com/en_us/productpage.0658859005.html
container
--figure
-- product-detail-info - it should be fixed as scrolling
on this page, when you scroll the property of ‘position’ of ‘product-detail-info’ switch to the ‘fixed’
it means
.container{width:100%}
.stiky-wrapper{ width:max-width: calc(100vw - 505px);
width: 66%;
width: calc(66vw - 2 * 40px); }
figure{position:relative} .product-detail-info{
position:absolute;
top:0;
left:100%;
width: calc( 34vw - 17px ) !important;
min-width: 408px; }
- left:100% — it seems that the left content follow the image as resizing
#the position changes as scrolling
.product-detail-info{
position: fixed;
top: 40px;
min-width: 408px;
left: calc(100vw - 465px);}
I just wanted to find out not to use javascript.
look at below what I’ve done without javascript!
#reference
https://css-tricks.com/forums/topic/width-fixed-div-element-same-as-the-parents/