Skip to content

Instantly share code, notes, and snippets.

@pim
Created August 28, 2012 17:55
Show Gist options
  • Save pim/3501413 to your computer and use it in GitHub Desktop.
Save pim/3501413 to your computer and use it in GitHub Desktop.
Equal columns height
/**
* Equal columns height
let’s say.
*/
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
body {
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
}
body > div {
padding: 1em;
background-color: #3E2217;
position: relative;
}
div > div {
/* width: 100%;*/
padding: 20px;
}
/* http://www.colourlovers.com/palette/2327397/Four_Lines */
div > div:first-of-type {
background-color: #F8B435;
width: 400px;
}
div > div:last-of-type {
position: absolute;
right: 25px;
top: 0;
bottom: 0;
width: 300px;
background-color: #8EA148;
/* width: 10%;*/
}
<div>
<div>
<h1>Div #1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit sapien, fringilla sed volutpat in, tincidunt ac turpis. Donec odio metus, cursus dictum placerat quis, eleifend pulvinar nunc. Donec et dui turpis. Proin in purus id massa dapibus porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque sodales, augue in ultricies ornare, eros nulla condimentum ante, malesuada pulvinar nibh metus sit amet ante. Sed sollicitudin luctus sem a ornare. Proin nisl libero, iaculis ut ullamcorper et, semper ut nulla. Duis justo dolor, commodo non adipiscing vitae, tincidunt sit amet risus. Duis diam diam, congue vel faucibus non, imperdiet luctus mauris. Phasellus aliquam vestibulum ipsum non facilisis. Suspendisse sit amet purus ac mauris vehicula interdum. Maecenas felis dolor, porttitor vel ultrices luctus, varius hendrerit dui.</p>
</div>
<div>
<h1>Div #2</h1>
<p>Suspendisse nunc urna, accumsan lobortis accumsan non, congue vitae nunc. Vivamus eget elit a nulla aliquam scelerisque. Suspendisse ac faucibus quam. Sed tincidunt, lectus vel tempus ultrices, ante lacus bibendum nisi, sed ornare neque tortor vel mi. Aliquam augue enim, pretium ut consectetur eget, tincidunt sit amet dolor. Donec vitae facilisis risus. Curabitur adipiscing luctus porta.</p>
</div>
</div>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment