<h1>Resize the below div!</h1>
<div id="wrapper" class="case-3">
<div class="box">
<div class="push-float-img"></div>
<img src="https://picsum.photos/id/130/600/200" alt="">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna ac, aliquet gravida orci. Pellentesque gravida urna sit amet nulla suscipit, at venenatis lorem dignissim. Morbi quis nunc eu velit condimentum ornare. Curabitur finibus tincidunt ullamcorper. Pellentesque tincidunt et odio vitae tempus. Praesent ac erat ut eros venenatis pulvinar. Pellentesque eu dapibus dui. Ut semper sed enim ut vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae elit eget velit porttitor consequat nec sed turpis. Proin libero nisl, egestas hendrerit vulputate et, lobortis non nulla. Aenean dui libero, dictum vel nibh eget, tristique egestas enim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna ac, aliquet gravida orci. Pellentesque gravida urna sit amet nulla suscipit, at venenatis lorem dignissim. Morbi quis nunc eu velit condimentum ornare. Curabitur finibus tincidunt ullamcorper. Pellentesque tincidunt et odio vitae tempus. Praesent ac erat ut eros venenatis pulvinar. Pellentesque eu dapibus dui. Ut semper sed enim ut vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae elit eget velit porttitor consequat nec sed turpis. Proin libero nisl, egestas hendrerit vulputate et, lobortis non nulla. Aenean dui libero, dictum vel nibh eget, tristique egestas enim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna ac, aliquet gravida orci. Pellentesque gravida urna sit amet nulla suscipit, at venenatis lorem dignissim. Morbi quis nunc eu velit condimentum ornare. Curabitur finibus tincidunt ullamcorper. Pellentesque tincidunt et odio vitae tempus. Praesent ac erat ut eros venenatis pulvinar. Pellentesque eu dapibus dui. Ut semper sed enim ut vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae elit eget velit porttitor consequat nec sed turpis. Proin libero nisl, egestas hendrerit vulputate et, lobortis non nulla. Aenean dui libero, dictum vel nibh eget, tristique egestas enim.
</div>
</div>
* { font: 16px sans-serif; }
#wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* make it resizable */
resize: horizontal;
overflow: hidden;
/* demo styles */
border: 1px solid blue;
width: 1000px;
max-width: 95vw;
text-align: justify;
}
/* For IE10 compatibility only */
#wrapper .box {
width: 100%;
}
#wrapper .push-float-img {
float: right;
width: 0;
height: 100%;
/* demo styles */
background: #F8F;
width: 10px;
}
#wrapper img {
clear: right;
float: right;
margin-left: 10px;
/* demo styles */
opacity: .8;
border-radius: 20px;
}
/* Change #wrapper.case-N */
.case-1 .push-float-img { margin-bottom: -200px; }
.case-1 img { height: 200px; }
.case-2 .push-float-img { margin-bottom: -100px; }
.case-2 img { width: 300px; }
.case-3 .push-float-img { margin-bottom: -20%; }
.case-3 img { width: 60%; }
/* NOPE! */
.case-4 .push-float-img { margin-bottom: -20%; }
.case-4 img { height: 20%; }
// "resize: horizontal" css is not supported by IE
if( !false || navigator.userAgent.match(/Trident\/7\./))
window.addEventListener('mousemove', function( ev ){
var w = document.getElementById('wrapper');
w.style.width = ev.clientX + 'px';
//console.log( w );
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.