Fixed + Scrolling Elements

Scrolling and fixed columns.

by the_voder

HTML

<div id="wrapper">
    <section id="left">
        <img src="https://www.kbmprinting.com/wp-content/uploads/2017/03/placeholder-portrait.jpg" alt="">
    </section>

    <section id="right">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut tempor sapien. Ut enim massa, sodales ut consectetur in, volutpat volutpat mi. Curabitur gravida nulla et sapien vulputate, et euismod eros accumsan. Morbi dictum nec magna eget rhoncus. Sed dignissim, nibh id suscipit cursus, libero enim posuere felis, a rhoncus leo ante et nisl. Proin id aliquet sapien, nec dictum massa. Quisque vulputate at neque quis laoreet. Aenean ac leo quis lectus faucibus pellentesque. Nulla posuere, magna eu blandit malesuada, ipsum quam luctus risus, ut tristique erat felis a neque. Pellentesque eleifend nec ipsum sit amet pulvinar.</p>

        <p>Duis accumsan vehicula fringilla. Donec consequat blandit magna et dictum. Phasellus vitae diam ornare tellus lobortis egestas. In hac habitasse platea dictumst. Phasellus auctor, sapien sed consectetur feugiat, risus orci accumsan risus, eu cursus nisl nulla at orci. Etiam dictum sit amet nisl sed pulvinar. Duis in euismod turpis. Nam urna enim, faucibus ultrices bibendum in, accumsan hendrerit elit.</p>

        <p>Pellentesque consectetur orci a lobortis luctus. Aliquam nulla nibh, hendrerit sit amet dictum sed, semper nec lorem. Nulla facilisi. Suspendisse sed felis bibendum, ultrices massa sit amet, porttitor nisl. Ut a est mi. Nam quis consequat elit. Integer interdum justo eu est molestie, eu ultricies lorem venenatis. Sed mollis, ex nec volutpat ultrices, elit mauris varius neque, quis pellentesque ipsum lacus sed mauris. Quisque hendrerit placerat odio, vitae condimentum nulla vulputate tincidunt. Nulla et faucibus erat. Nulla sit amet massa justo. Vivamus ultricies blandit elit, eget vehicula nunc eleifend efficitur. Etiam malesuada tempor odio, sed blandit elit luctus in. Sed suscipit enim nisl, nec rutrum nunc...

CSS

* {
  box-sizing: border-box;
}

#wrapper {
	position: relative;	
}

#left {
	position: fixed;
	margin: 0;
	width: 30%;
	padding: 20px;
}

#left img {
	width: 100%;
	height: auto;
	margin: 0;
}

#right {
	position: absolute;
	width: 70%;
	right: 0;
	margin: 0;
}