Menu
I'm having a lay-out like this:
The left column should scroll down (till the next category) when scroling to bottom.
My HTML looks like this:
<div class="wrapper gray-bg">
<div class="centered">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-5 col-lg-4 information group">
<h1>Glas</h1>
<hr>
<p class="info">
</p>
<p>Wil je een maximale <strong>lichtinval</strong> en maximale <strong>isolatie</strong>, maar hou je ook van een <strong>strak design</strong>? Kies dan voor onze vlakke lichtkoepels met dubbelwandig of 3-dubbel glas. Ze zien er niet alleen geweldig uit, maar scoren op alle vlakken ongelooflijk goed.</p>
<p></p>
<div class="buttons">
<a href="" class="button">bekijk referenties</a>
<a href="/nl/professional/contact" class="button gray">Vraag offerte</a>
</div>
</div>
<div class="col col-xs-12 col-sm-12 col-md-7 col-lg-8 product-container flex-row">
<div class="col-xs-12 col-md-12 col-lg-6 flex-container">
<div class="product">
<div class="image" style="background-image: url('https://exmple.com/media/cache/product_thumbnail/uploads/fa5256f2004f96761a87427be6db1e8d2e2fd983.jpeg');">
<span>new</span>
</div>
<h1>exmple iWindow2 ™</h1>
<hr>
<h2>Superisolerende lichtkoepel met 2-wandig glas</h2>
<ul class="findplace">
<li>Scoort erg goed qua isolatie: Ut-waarde 1,0 W/m²K</li>
<li>Strak, eigentijds design</li>
<li>Doorvalveilig</li>
<li>Slanke omkadering, slechts 28 mm</li>
<li>Vaste of opengaande uitvoering</li>
</ul>
<div class="bottom-buttons">
<a href="/nl/professional/product/exmple-iwindow2#prijs" class="col col-xs-3 col-md-6 col-lg-3">
<i class="fa fa-euro"></i>
<p>Prijs</p>
</a>
<a href="/nl/professional/product/exmple-iwindow2#technische_specs" class="col col-xs-3 col-md-6 col-lg-3 custom">
<i class="fa fa-drafting-compass"></i>
<p>Technische specs</p>
</a>
<a href="/nl/professional/product/exmple-iwindow2#brochures" class="col col-xs-3 col-md-6 col-lg-3">
<i class="fa fa-file-text"></i>
<p>Brochures</p>
</a>
<a href="/nl/professional/product/exmple-iwindow2#montage" class="col col-xs-3 col-md-6 col-lg-3">
<i class="fa fa-map"></i>
<p>Montage</p>
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-md-12 col-lg-6 flex-container">
<div class="product">
<div class="image" style="background-image: url('https://exmple.com/media/cache/product_thumbnail/uploads/e2b4180f8d9109c79350817d46e9c184080e8353.jpeg');">
<span>new</span>
</div>
<h1>exmple iWindow3 ™</h1>
<hr>
<h2>Superisolerende lichtkoepel met 3-wandig glas</h2>
<ul class="findplace">
<li>Scoort erg goed qua isolatie: Ut-waarde 0,5 W/m²K</li>
<li>Strak, eigentijds design</li>
<li>Doorvalveilig</li>
<li>Slanke omkadering, slechts 55mm</li>
<li>Vaste of opengaande uitvoering</li>
</ul>
<div class="bottom-buttons">
<a href="/nl/professional/product/exmple-iwindow3#prijs" class="col col-xs-3 col-md-6 col-lg-3">
<i class="fa fa-euro"></i>
<p>Prijs</p>
</a>
<a href="/nl/professional/product/exmple-iwindow3#technische_specs" class="col col-xs-3 col-md-6 col-lg-3 custom">
<i class="fa fa-drafting-compass"></i>
<p>Technische specs</p>
</a>
<a href="/nl/professional/product/exmple-iwindow3#brochures" class="col col-xs-3 col-md-6 col-lg-3">
<i class="fa fa-file-text"></i>
<p>Brochures</p>
</a>
<a href="/nl/professional/product/exmple-iwindow3#montage" class="col col-xs-3 col-md-6 col-lg-3">
<i class="fa fa-map"></i>
<p>Montage</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
But I have no idea on how to make sure the left content is scrolling down when the other content on the right is not. I this doable with some javascript code?
Can you help me?
731
With CSS properties, you can easily put two <div> next to each other in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.
Three or more different div can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side.
The most common way to place two divs side by side is by using inline-block css property. The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.
You can add a scroll to the products area like this
.product-container {
height: 100vh; /* limit it to the size of your window */
overflow: auto; /* add scroll when necessary */
}
See the example here: https://codepen.io/oriadam/pen/BrWqNw
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
