how to make left column sticky foundation 6.4 - css

Question

I want to stick left column like youtube (dont want to use off-canvas)
developed this
http://wall.iamdeepak.io/
but as you can see if you scroll main page it also scroll categories (left column) area
Top Bar Working Fine
<div id="topbar" data-sticky-container>
<div class="top-bar" data-sticky data-options="marginTop:0;">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li>
<div data-responsive-toggle="categories_menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
</div>
</li>
<li class="menu-text">top bar is perfect</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>
<input type="search" placeholder="Search">
</li>
<li>
<button type="button" class="button ripple">Search</button>
</li>
</ul>
</div>
</div>
Main Content Area (want to make 1st column (#categories_menu) stick like youtube). It is sticky but not the way I want.
<div class="expanded row medium-collapse">
<nav id="categories_menu" class="medium-2 columns" data-sticky-container>
<div class="sticky" data-sticky data-top-anchor="topbar:bottom" data-margin-top="2" style="margin: 0">
<div class="sticky-menu">
<ul class="vertical menu accordion-menu" data-accordion-menu data-multi-open="false">
<li class="menu-text">Category</li>
<li class="">
<a href="#" title="Architecture Wallpapers">
<i class="icon-magic-wand"></i>
<span>Architecture</span>
</a>
<ul class="menu vertical nested categories_sub" id="categories_sub0">
<li class="">
<a href="http://wallpapersden5.app/3d-wallpapers/" title="3D Wallpapers">
<i class="icon-contrast"></i>
<span>3D</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/abstract-wallpapers/" title="Abstract Wallpapers">
<i class="icon-spades"></i>
<span>Abstract</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/anime-wallpapers/" title="Anime Wallpapers">
<i class="icon-eye"></i>
<span>Anime</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/fantasy-wallpapers/" title="Fantasy Wallpapers">
<i class="icon-fire"></i>
<span>Fantasy</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/textures-wallpapers/" title="Textures Wallpapers">
<i class="icon-library"></i>
<span>Textures</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/vector-wallpapers/" title="Vector Wallpapers">
<i class="icon-stack"></i>
<span>Vector</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/minimalist-wallpapers/" title="Minimalist Wallpapers">
<i class="icon-eyedropper"></i>
<span>Minimalist</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/inspirational-quotes-wallpapers/" title="Inspirational & Quotes Wallpapers">
<i class="icon-hammer"></i>
<span>Quotes</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/artist-wallpapers/" title="Artist Wallpapers">
<i class="icon-shield"></i>
<span>Artist</span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="#" title="Bollywood Wallpapers">
<i class="icon-film"></i>
<span>Bollywood</span>
</a>
<ul class="menu vertical nested categories_sub" id="categories_sub1">
<li class="">
<a href="http://wallpapersden5.app/bollywood-movies-wallpapers/" title="Bollywood Movies Wallpapers">
<i class="icon-video-camera"></i>
<span>Bollywood Movies</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/bollywood-actress-wallpapers/" title="Bollywood Actress Wallpapers">
<i class="icon-accessibility"></i>
<span>Bollywood Actress</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/bollywood-actors-wallpapers/" title="Bollywood Actors Wallpapers">
<i class="icon-user-tie"></i>
<span>Bollywood Actors</span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="#" title="Hollywood Wallpapers">
<i class="icon-heart"></i>
<span>Hollywood</span>
</a>
<ul class="menu vertical nested categories_sub" id="categories_sub2">
<li class="">
<a href="http://wallpapersden5.app/hollywood-movies-wallpapers/" title="Hollywood Movies Wallpapers">
<i class="icon-video-camera"></i>
<span>Hollywood Movies</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/hollywood-actress-wallpapers/" title="Hollywood Actress Wallpapers">
<i class="icon-accessibility"></i>
<span>Hollywood Actress</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/hollywood-actors-wallpapers/" title="Hollywood Actors Wallpapers">
<i class="icon-user-tie"></i>
<span>Hollywood Actors</span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="#" title="Celebs Wallpapers">
<i class="icon-tv"></i>
<span>Celebs</span>
</a>
<ul class="menu vertical nested categories_sub" id="categories_sub3">
<li class="">
<a href="http://wallpapersden5.app/girls-wallpapers/" title="Girls Wallpapers">
<i class="icon-accessibility"></i>
<span>Girls</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/men-wallpapers/" title="Man Wallpapers">
<i class="icon-user-tie"></i>
<span>Man</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/music-wallpapers/" title="Music Wallpapers">
<i class="icon-podcast"></i>
<span>Music</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/tv-series-wallpapers/" title="TV Series Wallpapers">
<i class="icon-tv"></i>
<span>TV Series</span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="http://wallpapersden5.app/animals-wallpapers/" title="Animals Wallpapers">
<i class="icon-bug"></i>
<span>Animals</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/games-wallpapers/" title="Games Wallpapers">
<i class="icon-mug"></i>
<span>Games</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/nature-wallpapers/" title="Nature Wallpapers">
<i class="icon-magnet"></i>
<span>Nature</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/superheroes-cartoons-wallpapers/" title="Superheroes & Cartoons Wallpapers">
<i class="icon-svg"></i>
<span>Superheroes</span>
</a>
</li>
<li class="">
<a href="#" title="Others Wallpapers">
<i class="icon-lab"></i>
<span>Others</span>
</a>
<ul class="menu vertical nested categories_sub" id="categories_sub8">
<li class="">
<a href="http://wallpapersden5.app/brands-wallpapers/" title="Brands Wallpapers">
<i class="icon-shield"></i>
<span>Brands</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/flowers-wallpapers/" title="Flowers Wallpapers">
<i class="icon-leaf"></i>
<span>Flowers</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/food-wallpapers/" title="Food Wallpapers">
<i class="icon-spoon-knife"></i>
<span>Food</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/hi-tech-wallpapers/" title="Hi-Tech Wallpapers">
<i class="icon-lab"></i>
<span>Hi-Tech</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/macro-wallpapers/" title="Macro Wallpapers">
<i class="icon-drive"></i>
<span>Macro</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/other-wallpapers/" title="Other Wallpapers">
<i class="icon-diamonds"></i>
<span>Other</span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="http://wallpapersden5.app/city-wallpapers/" title="City Wallpapers">
<i class="icon-earth"></i>
<span>City</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/holidays-wallpapers/" title="Holidays Wallpapers">
<i class="icon-airplane"></i>
<span>Holidays</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/wwe-wallpapers/" title="WWE Wallpapers">
<i class="icon-codepen"></i>
<span>WWE </span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/sport-wallpapers/" title="Sport Wallpapers">
<i class="icon-dice"></i>
<span>Sport</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/space-wallpapers/" title="Space Wallpapers">
<i class="icon-rocket"></i>
<span>Space</span>
</a>
</li>
<li class="">
<a href="http://wallpapersden5.app/cars-wallpapers/" title="Cars Wallpapers">
<i class="icon-truck"></i>
<span>Cars</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="content" class="medium-8 columns" style="padding: 0 10px;">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto deleniti, eos excepturi expedita facilis hic ipsa maxime nemo quae quidem quis quisquam reiciendis sit tempore temporibus totam ut veniam?
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div>Deserunt error nesciunt non optio repudiandae sit suscipit voluptas! Corporis dolor et ipsa labore nemo repellendus ullam velit. Ab consequatur consequuntur earum in inventore iure magni nam obcaecati officia temporibus.
</div>
<br/>
<br/>
<br/>
<div>A adipisci eum illum inventore laudantium necessitatibus numquam odit sapiente voluptatum? Fugit inventore magnam, modi nesciunt obcaecati quia quo ratione sequi tempora ullam? Ea, laudantium omnis optio sed sint unde!
</div>
<div>Ab assumenda atque beatae corporis culpa earum exercitationem nobis sit veniam. Alias fuga minima necessitatibus quisquam? Accusantium at autem blanditiis cum expedita labore nihil repellendus reprehenderit repudiandae, rerum sed temporibus.
</div>
<br/>
<br/>
<br/>
<div>Amet beatae consequatur dicta eaque facere ipsum necessitatibus nemo, quaerat quas quibusdam rerum totam. Aliquam aut consequuntur pariatur vitae. Aspernatur atque dignissimos distinctio laborum? Minus molestias obcaecati repudiandae saepe soluta.
</div>
<div>Alias amet aut autem beatae cupiditate ea eaque error et expedita in libero nesciunt nisi nostrum nulla perspiciatis quis repellendus suscipit, temporibus ut veniam. Cum minima quia rem repellat rerum.
</div>
<br/>
<br/>
<br/>
<div>Ab dignissimos distinctio dolorum odio quae. Alias error, facere impedit labore minus sed tempore ut! Officiis placeat similique totam. Consectetur dicta error impedit incidunt modi obcaecati perferendis possimus quaerat unde?
</div>
</div>
<div class="medium-2 columns">
<section class="resolution">
<ul class="vertical menu accordion-menu" data-accordion-menu data-multi-open="false">
<li class="menu-text mbb">Your Screen : <span id="myres"></span></li>
<li class="text-center hide-for-small-only">
<div class="addthis_horizontal_follow_toolbox"></div>
</li>
<li class="menu-text">Resolution</li>
<li>
Wide Screen
<ul class="menu vertical nested">
<li>
<a href="http://wallpapersden5.app/?resolution=2048x1152">
2048x1152
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=2560x1080">
2560x1080
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=2560x1024">
2560x1024
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=2560x1600">
2560x1600
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=1920x1200">
1920x1200
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=1680x1050">
1680x1050
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=1440x900">
1440x900
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=1280x800">
1280x800
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=2560x1440">
2560x1440
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=1600x900">
1600x900
</a>
</li>
</ul>
</li>
<li>
HD Screen
<ul class="menu vertical nested">
<li>
<a href="http://wallpapersden5.app/?resolution=1920x1080">
1920x1080
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=1280x720">
1280x720
</a>
</li>
</ul>
</li>
<li>
Ultra HD Screen
<ul class="menu vertical nested">
<li>
<a href="http://wallpapersden5.app/?resolution=3840x2400">
3840x2400
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=3840x2160">
3840x2160
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=5120x2880">
5120x2880
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=7680x4320">
7680x4320
</a>
</li>
</ul>
</li>
<li>
Full Screen
<ul class="menu vertical nested">
<li>
<a href="http://wallpapersden5.app/?resolution=1600x1200">
1600x1200
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=1400x1050">
1400x1050
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=1280x960">
1280x960
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=1152x864">
1152x864
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=1024x768">
1024x768
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=1280x1024">
1280x1024
</a>
</li>
</ul>
</li>
<li>
Mobile
<ul class="menu vertical nested">
<li>
<a href="http://wallpapersden5.app/?resolution=2160x3840">
2160x3840
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=1440x2560">
1440x2560
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=1080x1920">
1080x1920
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=1024x600">
1024x600
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=960x544">
960x544
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=800x1280">
800x1280
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=800x600">
800x600
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=720x1280">
720x1280
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=540x960">
540x960
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=480x800">
480x800
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=360x640">
360x640
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=320x480">
320x480
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=320x240">
320x240
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=240x400">
240x400
</a>
</li>
</ul>
</li>
<li>
Apple
<ul class="menu vertical nested">
<li>
<a href="http://wallpapersden5.app/?resolution=2932x2932">
2932x2932
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=2248x2248">
2248x2248
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=1280x2120">
1280x2120
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=1224x1224">
1224x1224
</a>
</li>
<li>
<a href="http://wallpapersden5.app/?resolution=950x1534">
950x1534
</a>
</li>
</ul>
</li>
</ul>
</section>
</div>

Answer 1

You can try this one
$(window).scroll(function(){
manageproductimage();
});
$(document).ready(function(){
manageproductimage();
});
function manageproductimage(){
var imgagesideht = $('.left-side-wrapper .left-inner').height();
var contentht = $('.right-side-content').height();
var position = $('.left-side-wrapper .left-inner').offset();
var headerHeight = $('.top-bar').innerHeight() + 72;
var scrltop = $(window).scrollTop();
var topposition = position.top;
var remht = contentht - imgagesideht;
var compareht = headerHeight + remht;
if(contentht > imgagesideht){
if(scrltop > headerHeight){
$('.left-side-wrapper .left-inner').css('position', 'fixed');
$('.left-side-wrapper .left-inner').css('top', 0);
if(scrltop > headerHeight + imgagesideht){
var tttt = headerHeight + imgagesideht;
var hhhh = tttt - scrltop;
$('.left-side-wrapper .left-inner').css('top', tttt - scrltop);
}
}
else{
$('.left-side-wrapper .left-inner').css('position', '');
$('.left-side-wrapper .left-inner').css('top', '');
}
}
}
*{
padding: 0px;
margin: 0px;}
p {
color: #8e8e8e;
font-family: arial;
font-size: 15px;
line-height: 27px;}
h1, h2, h3, h4, h5, h6 {
color: #333;
font-family: arial;
font-size: 20px;
margin-bottom: 10px;}
body {
background: #d7d7d7 none repeat scroll 0 0;
}
.main-wrapper {
padding: 15px;
}
.top-bar {
background: #fff none repeat scroll 0 0;
padding: 15px;
}
.scrollin-wrapper::after {
clear: both;
content: "";
display: table;
}
.left-side-wrapper .left-inner {
background: #fff none repeat scroll 0 0;
box-sizing: border-box;
padding: 10px;
width: 500px;
}
.scrollin-wrapper {
margin-top: 15px;
}
.left-side-wrapper {
background: #fff none repeat scroll 0 0;
box-sizing: border-box;
float: left;
width: 500px;
}
.right-side-content {
background: #fff none repeat scroll 0 0;
box-sizing: border-box;
float: right;
padding: 15px;
width: calc(100% - 515px);
}
.details-section {
background: #fff none repeat scroll 0 0;
margin-top: 15px;
padding: 15px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<div class="main-wrapper">
<div class="top-bar">
<h3>Top bar</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="scrollin-wrapper">
<div class="left-side-wrapper">
<div class="left-inner">
<div class="content">
<h3>
Left side sticky
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<div class="right-side-content">
<div class="right-inner">
<div class="content">
<h3>
Right side contnet
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
<div class="details-section">
<h3>
Fill width bottom contnet
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p><p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</body>
</html>