Skip to content

Instantly share code, notes, and snippets.

@ehgoodenough

ehgoodenough/columns.htm

Created May 8, 2013 00:22
Show Gist options
  • Save ehgoodenough/5537283 to your computer and use it in GitHub Desktop.
Save ehgoodenough/5537283 to your computer and use it in GitHub Desktop.
Download ZIP
By styling the columns as table, you can ensure that all elements of the page remain the same height, regardless of the amount of content.
Raw
columns.htm
<!DOCTYPE hmtl>
<html>
<head>
<style>
body
{
margin:0px;
}
#partition
{
width:100%;
display:table;
table-layout:fixed;
border-spacing:25px;
background-color:#EEE;
}
.part
{
display:table-cell;
vertical-align:top;
color:#EEE;
padding:25px;
font-family:Calibri;
background-color:#2F2F2F;
}
</style>
</head>
<body>
<div id="partition">
<div class="part">Hello World! How are you today?</div>
<div class="part">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla condimentum elementum est eu venenatis.
Vivamus purus massa, condimentum vel gravida ac, porta non sapien.
Donec scelerisque, lacus sit amet iaculis facilisis, dolor urna
ultrices nibh, et vulputate nisl sem sed tortor. Pellentesque egestas,
augue eget placerat pharetra, enim justo aliquam orci, eu aliquet mi arcu
id erat. Integer sapien augue, porta at ornare vitae, blandit id metus.</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment