Skip to content

Instantly share code, notes, and snippets.

@dylanpyle

dylanpyle/gist:7146658

Last active December 26, 2015 11:49
Show Gist options
  • Save dylanpyle/7146658 to your computer and use it in GitHub Desktop.
Save dylanpyle/7146658 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!doctype html>
<html>
<head>
<style>
html {
overflow-x: hidden !important;
}
body {
font-size: 18px;
overflow-x: hidden !important;
}
.left {
width: 200px;
position: fixed;
background: lightblue;
left: 0;
bottom: 0;
top: 0;
}
.main {
width: 700px;
position: absolute;
left: 200px;
}
.container {
position: relative;
}
.expansion {
position: absolute;
left: -100px;
background: green;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class='left'>
left bar
</div>
<div class='main'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis, massa eget dictum aliquam, mi libero varius quam, ut ultricies mauris magna eleifend lacus. Nullam id orci sed tellus semper pharetra. Nam sed fringilla sem, sit amet ornare erat. Nam id elementum nibh, id ornare massa. Aliquam sit amet pharetra enim, in fringilla elit. Maecenas porta urna convallis tincidunt accumsan. Maecenas in pretium eros. Nunc facilisis lacus sit amet libero viverra dignissim. Nunc blandit, metus vitae tristique venenatis, dolor turpis sollicitudin metus, quis interdum ipsum eros pharetra nisl. Vestibulum sit amet rutrum turpis.
<div class='container'>
<div class='expansion'>
a property sheet
</div>
</div>
Fusce leo nibh, adipiscing vitae mauris eu, posuere aliquet velit. Etiam in sodales lectus, et condimentum nibh. Integer tellus augue, imperdiet porta molestie non, vulputate non lectus. Curabitur vestibulum hendrerit consectetur. Vivamus vulputate vestibulum velit, in dignissim quam mattis in. Fusce suscipit suscipit tortor quis tincidunt. Mauris nisi nunc, mollis porttitor odio eget, molestie fringilla ligula. Aliquam commodo sapien at dolor rutrum, quis rhoncus sem vulputate.
Vivamus blandit ut felis nec malesuada. Proin et quam pretium, gravida lorem sollicitudin, aliquam ante. Sed pharetra diam vitae lectus vestibulum consectetur. Sed metus neque, consectetur eu commodo quis, consequat quis ante. Vestibulum cursus enim non felis lacinia aliquam. Integer aliquam elementum varius. Suspendisse dignissim aliquam iaculis. Nam feugiat diam odio. Vivamus in molestie mauris, vel viverra mauris. Proin aliquam id ipsum eu congue.
In semper, tortor at hendrerit sollicitudin, sapien lacus suscipit orci, id porttitor ante nisl sed metus. Aenean eget blandit metus. Fusce suscipit rhoncus neque, vel aliquam metus placerat sed. Quisque placerat tempus pulvinar. Nulla ullamcorper in nisi vitae dictum. Quisque fringilla ipsum ut porttitor convallis. Nulla vitae diam aliquet, varius justo in, sagittis elit. Phasellus id ligula et leo pretium porttitor ac in libero. Ut venenatis, tortor id pharetra pharetra, velit lacus porta velit, mattis viverra tortor felis vel lorem. Integer tristique nec lorem et viverra.
Vivamus mollis, est ac ultrices rutrum, orci felis volutpat purus, ac feugiat enim metus eget quam. Aliquam imperdiet mi id lobortis semper. Proin a pellentesque mauris, nec mattis nulla. Quisque egestas, lectus sed egestas lacinia, dui dui facilisis magna, vel malesuada ante dui non urna. Vestibulum fringilla ac orci quis eleifend. Etiam fermentum tortor libero, eu pulvinar nisl volutpat non. Curabitur est mi, pharetra eu rutrum sed, ultrices a ipsum. Nulla in ligula pharetra, pretium quam accumsan, congue nunc. Cras mollis nec magna a tempor. Nunc id odio turpis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis, massa eget dictum aliquam, mi libero varius quam, ut ultricies mauris magna eleifend lacus. Nullam id orci sed tellus semper pharetra. Nam sed fringilla sem, sit amet ornare erat. Nam id elementum nibh, id ornare massa. Aliquam sit amet pharetra enim, in fringilla elit. Maecenas porta urna convallis tincidunt accumsan. Maecenas in pretium eros. Nunc facilisis lacus sit amet libero viverra dignissim. Nunc blandit, metus vitae tristique venenatis, dolor turpis sollicitudin metus, quis interdum ipsum eros pharetra nisl. Vestibulum sit amet rutrum turpis.
Fusce leo nibh, adipiscing vitae mauris eu, posuere aliquet velit. Etiam in sodales lectus, et condimentum nibh. Integer tellus augue, imperdiet porta molestie non, vulputate non lectus. Curabitur vestibulum hendrerit consectetur. Vivamus vulputate vestibulum velit, in dignissim quam mattis in. Fusce suscipit suscipit tortor quis tincidunt. Mauris nisi nunc, mollis porttitor odio eget, molestie fringilla ligula. Aliquam commodo sapien at dolor rutrum, quis rhoncus sem vulputate.
Vivamus blandit ut felis nec malesuada. Proin et quam pretium, gravida lorem sollicitudin, aliquam ante. Sed pharetra diam vitae lectus vestibulum consectetur. Sed metus neque, consectetur eu commodo quis, consequat quis ante. Vestibulum cursus enim non felis lacinia aliquam. Integer aliquam elementum varius. Suspendisse dignissim aliquam iaculis. Nam feugiat diam odio. Vivamus in molestie mauris, vel viverra mauris. Proin aliquam id ipsum eu congue.
In semper, tortor at hendrerit sollicitudin, sapien lacus suscipit orci, id porttitor ante nisl sed metus. Aenean eget blandit metus. Fusce suscipit rhoncus neque, vel aliquam metus placerat sed. Quisque placerat tempus pulvinar. Nulla ullamcorper in nisi vitae dictum. Quisque fringilla ipsum ut porttitor convallis. Nulla vitae diam aliquet, varius justo in, sagittis elit. Phasellus id ligula et leo pretium porttitor ac in libero. Ut venenatis, tortor id pharetra pharetra, velit lacus porta velit, mattis viverra tortor felis vel lorem. Integer tristique nec lorem et viverra.
Vivamus mollis, est ac ultrices rutrum, orci felis volutpat purus, ac feugiat enim metus eget quam. Aliquam imperdiet mi id lobortis semper. Proin a pellentesque mauris, nec mattis nulla. Quisque egestas, lectus sed egestas lacinia, dui dui facilisis magna, vel malesuada ante dui non urna. Vestibulum fringilla ac orci quis eleifend. Etiam fermentum tortor libero, eu pulvinar nisl volutpat non. Curabitur est mi, pharetra eu rutrum sed, ultrices a ipsum. Nulla in ligula pharetra, pretium quam accumsan, congue nunc. Cras mollis nec magna a tempor. Nunc id odio turpis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis, massa eget dictum aliquam, mi libero varius quam, ut ultricies mauris magna eleifend lacus. Nullam id orci sed tellus semper pharetra. Nam sed fringilla sem, sit amet ornare erat. Nam id elementum nibh, id ornare massa. Aliquam sit amet pharetra enim, in fringilla elit. Maecenas porta urna convallis tincidunt accumsan. Maecenas in pretium eros. Nunc facilisis lacus sit amet libero viverra dignissim. Nunc blandit, metus vitae tristique venenatis, dolor turpis sollicitudin metus, quis interdum ipsum eros pharetra nisl. Vestibulum sit amet rutrum turpis.
Fusce leo nibh, adipiscing vitae mauris eu, posuere aliquet velit. Etiam in sodales lectus, et condimentum nibh. Integer tellus augue, imperdiet porta molestie non, vulputate non lectus. Curabitur vestibulum hendrerit consectetur. Vivamus vulputate vestibulum velit, in dignissim quam mattis in. Fusce suscipit suscipit tortor quis tincidunt. Mauris nisi nunc, mollis porttitor odio eget, molestie fringilla ligula. Aliquam commodo sapien at dolor rutrum, quis rhoncus sem vulputate.
Vivamus blandit ut felis nec malesuada. Proin et quam pretium, gravida lorem sollicitudin, aliquam ante. Sed pharetra diam vitae lectus vestibulum consectetur. Sed metus neque, consectetur eu commodo quis, consequat quis ante. Vestibulum cursus enim non felis lacinia aliquam. Integer aliquam elementum varius. Suspendisse dignissim aliquam iaculis. Nam feugiat diam odio. Vivamus in molestie mauris, vel viverra mauris. Proin aliquam id ipsum eu congue.
In semper, tortor at hendrerit sollicitudin, sapien lacus suscipit orci, id porttitor ante nisl sed metus. Aenean eget blandit metus. Fusce suscipit rhoncus neque, vel aliquam metus placerat sed. Quisque placerat tempus pulvinar. Nulla ullamcorper in nisi vitae dictum. Quisque fringilla ipsum ut porttitor convallis. Nulla vitae diam aliquet, varius justo in, sagittis elit. Phasellus id ligula et leo pretium porttitor ac in libero. Ut venenatis, tortor id pharetra pharetra, velit lacus porta velit, mattis viverra tortor felis vel lorem. Integer tristique nec lorem et viverra.
Vivamus mollis, est ac ultrices rutrum, orci felis volutpat purus, ac feugiat enim metus eget quam. Aliquam imperdiet mi id lobortis semper. Proin a pellentesque mauris, nec mattis nulla. Quisque egestas, lectus sed egestas lacinia, dui dui facilisis magna, vel malesuada ante dui non urna. Vestibulum fringilla ac orci quis eleifend. Etiam fermentum tortor libero, eu pulvinar nisl volutpat non. Curabitur est mi, pharetra eu rutrum sed, ultrices a ipsum. Nulla in ligula pharetra, pretium quam accumsan, congue nunc. Cras mollis nec magna a tempor. Nunc id odio turpis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis, massa eget dictum aliquam, mi libero varius quam, ut ultricies mauris magna eleifend lacus. Nullam id orci sed tellus semper pharetra. Nam sed fringilla sem, sit amet ornare erat. Nam id elementum nibh, id ornare massa. Aliquam sit amet pharetra enim, in fringilla elit. Maecenas porta urna convallis tincidunt accumsan. Maecenas in pretium eros. Nunc facilisis lacus sit amet libero viverra dignissim. Nunc blandit, metus vitae tristique venenatis, dolor turpis sollicitudin metus, quis interdum ipsum eros pharetra nisl. Vestibulum sit amet rutrum turpis.
Fusce leo nibh, adipiscing vitae mauris eu, posuere aliquet velit. Etiam in sodales lectus, et condimentum nibh. Integer tellus augue, imperdiet porta molestie non, vulputate non lectus. Curabitur vestibulum hendrerit consectetur. Vivamus vulputate vestibulum velit, in dignissim quam mattis in. Fusce suscipit suscipit tortor quis tincidunt. Mauris nisi nunc, mollis porttitor odio eget, molestie fringilla ligula. Aliquam commodo sapien at dolor rutrum, quis rhoncus sem vulputate.
Vivamus blandit ut felis nec malesuada. Proin et quam pretium, gravida lorem sollicitudin, aliquam ante. Sed pharetra diam vitae lectus vestibulum consectetur. Sed metus neque, consectetur eu commodo quis, consequat quis ante. Vestibulum cursus enim non felis lacinia aliquam. Integer aliquam elementum varius. Suspendisse dignissim aliquam iaculis. Nam feugiat diam odio. Vivamus in molestie mauris, vel viverra mauris. Proin aliquam id ipsum eu congue.
In semper, tortor at hendrerit sollicitudin, sapien lacus suscipit orci, id porttitor ante nisl sed metus. Aenean eget blandit metus. Fusce suscipit rhoncus neque, vel aliquam metus placerat sed. Quisque placerat tempus pulvinar. Nulla ullamcorper in nisi vitae dictum. Quisque fringilla ipsum ut porttitor convallis. Nulla vitae diam aliquet, varius justo in, sagittis elit. Phasellus id ligula et leo pretium porttitor ac in libero. Ut venenatis, tortor id pharetra pharetra, velit lacus porta velit, mattis viverra tortor felis vel lorem. Integer tristique nec lorem et viverra.
Vivamus mollis, est ac ultrices rutrum, orci felis volutpat purus, ac feugiat enim metus eget quam. Aliquam imperdiet mi id lobortis semper. Proin a pellentesque mauris, nec mattis nulla. Quisque egestas, lectus sed egestas lacinia, dui dui facilisis magna, vel malesuada ante dui non urna. Vestibulum fringilla ac orci quis eleifend. Etiam fermentum tortor libero, eu pulvinar nisl volutpat non. Curabitur est mi, pharetra eu rutrum sed, ultrices a ipsum. Nulla in ligula pharetra, pretium quam accumsan, congue nunc. Cras mollis nec magna a tempor. Nunc id odio turpis.
<div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment