Fixed content with same width of a scrolling container

HTML
<!doctype html> <div class="container"> <div class="col-left"> <p><code>content</code></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia nec velit at mattis. In metus quam, rutrum eget tincidunt quis, ultricies non enim. Integer pulvinar viverra mattis. Donec nec venenatis nisl. Donec tortor lorem, accumsan luctus ultricies quis, consectetur in diam. Donec sem sem, gravida sed tortor id, vehicula euismod ante. Morbi fermentum est posuere orci commodo, sed auctor nibh laoreet. Fusce sodales, dui at lobortis porttitor, lacus ex vestibulum mi, ac malesuada lacus sem eget arcu.</p> <p>Donec at augue rutrum, aliquet purus vitae, varius metus. Quisque vestibulum dui mauris, vel commodo libero laoreet et. Donec eget finibus orci. Aenean quam ante, tempor eget massa at, lacinia rutrum mauris. Nulla egestas ligula nunc, non tempor turpis volutpat eget. Vestibulum fringilla enim at tincidunt pellentesque. Pellentesque at efficitur ligula, quis vulputate turpis. Integer eget luctus est. Nulla et mauris sed massa laoreet bibendum. Ut aliquet pretium efficitur. Vestibulum malesuada dui ac metus pharetra, at sodales orci gravida. In ultrices congue malesuada. Curabitur augue libero, tincidunt in elit tempus, condimentum varius nisi. Phasellus gravida nisl in libero vehicula sagittis.</p> <p>Proin mi nisi, vehicula mollis porta non, fermentum quis tellus. Sed turpis dolor, congue fringilla magna laoreet, ornare egestas risus. Suspendisse bibendum massa elit, quis egestas libero eleifend quis. Vivamus eleifend mattis euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce a fermentum lorem. Duis laoreet pulvinar tempor. Aliquam tellus libero, convallis at lacinia sed, faucibus vitae ex. Nullam mollis, dolor in pulvinar laoreet, leo augue commodo mauris, bibendum suscipit magna velit ac est. Curabitur sed ante mi. Maecenas ac facilisis ante. Nam tristique elit id placerat tincidunt.</p> <p>Praesent fringilla sed urna gravida tempus. Morbi nec mauris tellus. Suspendisse cursus convallis enim sed auctor. Pellentesque quis tincidunt urna, vehicula consequat mi. Praesent at quam nisl. Donec luctus libero eu odio dictum efficitur. Nam lobortis lorem augue, in vehicula orci efficitur aliquam. Duis placerat ipsum id sem blandit, at placerat nulla auctor. Nulla mauris ipsum, vehicula sed lorem eu, tristique ornare felis. Mauris eu nisl justo. Nam id interdum massa. Sed eu nisl vitae massa lacinia ultricies ut ut elit.</p> <p>Sed volutpat nulla ac luctus commodo. Praesent quam nibh, ultrices malesuada sagittis et, vulputate in metus. Donec molestie pretium metus, eget sagittis libero volutpat vel. Suspendisse potenti. Donec eu lectus a ligula placerat porttitor eget tincidunt nunc. Cras egestas vel sem eu auctor. Etiam in efficitur metus. Curabitur ut lorem sollicitudin nisl molestie laoreet fringilla id mauris. Nunc egestas vel ante et gravida. Ut at metus venenatis, sollicitudin quam non, consequat mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla molestie eu urna tristique tincidunt.</p> </div> <div class="col-right"> <p><code>aside</code></p> <p>Sed volutpat nulla ac luctus commodo. Praesent quam nibh, ultrices malesuada sagittis et, vulputate in metus. Donec molestie pretium metus, eget sagittis libero volutpat vel. Suspendisse potenti. Donec eu lectus a ligula placerat porttitor eget tincidunt nunc. Cras egestas vel sem eu auctor. Etiam in efficitur metus. Curabitur ut lorem sollicitudin nisl molestie laoreet fringilla id mauris. Nunc egestas vel ante et gravida. Ut at metus venenatis, sollicitudin quam non, consequat mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla molestie eu urna tristique tincidunt.</p> </div> </div> <div class="fixed"> <div class="container">fixed to the bottom with same width of <code>content</code></div> </div>
CSS
* { -webkit-box-sizing: boder-box; box-sizing: boder-box; } body { background-color: #eee; line-height: 1.4; padding: 1em 0 4.5em; } .container { background-color: wheat; margin: 0 auto; max-width: 48em; width: 90%; } .container::before, .container::after { content: " "; display: table; } .container:after { clear: both; } [class*="col-"] { background-color: #fff; border: 1px dashed #666; padding: 0 1em; } .col-left { float: left; width: 60%; } .col-right { float: right; width: calc(40% - 5em); } .fixed { background-color: #fff; bottom: 0; left: 50%; max-width: 48em; position: fixed; text-align: center; width: 90%; transform: translateX(-50%); } .fixed .container { border: 1px dashed #666; margin: 0; max-width: 60%; padding: 1em; }
JAVASCRIPT
Expand for more options Login