Skip to content

Instantly share code, notes, and snippets.

@ksykulev
Created November 9, 2012 16:52
Show Gist options
  • Save ksykulev/4046807 to your computer and use it in GitHub Desktop.
Save ksykulev/4046807 to your computer and use it in GitHub Desktop.
Create an absolutely positioned div that auto overflows if screen gets smaller but doesn't expand past the height of the content
<!DOCTYPE html>
<html>
<head>
<style>
html, body { margin:0px;padding:0px;height:100%;width:100%; }
#left-side { float:left;background-color:#E5EBF2;width:25%;border-right: 1px solid #B4B4B4;height:100%; }
#right-side { float:left;position:relative;height:100%;width:70%; }
#floater { background-color:lightgray;position:absolute;padding:5px;width:365px;top:20px;left:-15px;-moz-box-shadow: 0 4px 8px rgba(0,0,0,0.6);-webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.6);-o-box-shadow: 0 4px 8px rgba(0,0,0,0.6);box-shadow: 0 4px 8px rgba(0,0,0,0.6); }
/*the `magic`*/
#floater { overflow-y:auto;height:auto;max-height:90%; }
</style>
</head>
<body>
<section id="left-side"></section>
<section id="right-side">
<div id="floater">
<p>
Helvetica fap jean shorts gentrify. Polaroid mustache twee photo booth lo-fi. Synth master cleanse before they sold out brunch lomo kale chips umami mustache. Keytar kale chips chillwave, post-ironic umami dreamcatcher vinyl swag gastropub. Beard pop-up polaroid, Austin high life farm-to-table small batch photo booth dreamcatcher tattooed vegan irony. Fap american apparel locavore pinterest messenger bag mlkshk 3 wolf moon. Iphone odd future jean shorts, dreamcatcher sriracha yr quinoa DIY raw denim art party authentic tofu.
</p>
<p>
Vinyl pitchfork viral pour-over marfa, squid cliche aesthetic put a bird on it truffaut mumblecore post-ironic sartorial. Swag ethical ethnic PBR, helvetica selvage seitan mustache authentic bushwick aesthetic. Dreamcatcher gastropub lo-fi keytar, banksy vegan readymade wolf keffiyeh mustache food truck quinoa. Gentrify farm-to-table echo park brunch, skateboard you probably haven't heard of them pour-over brooklyn banksy cred. Direct trade swag hella kale chips small batch. Vice raw denim whatever VHS, salvia next level kale chips keytar high life 3 wolf moon semiotics freegan. Pour-over artisan shoreditch scenester fanny pack, mustache typewriter terry richardson helvetica biodiesel.
</p>
</div>
</section>
</body>
</html>
@arun057
Copy link

arun057 commented Nov 9, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment