Skip to content

Instantly share code, notes, and snippets.

@michaeldyrynda
Created April 2, 2013 00:33
Show Gist options
  • Save michaeldyrynda/5289006 to your computer and use it in GitHub Desktop.
Save michaeldyrynda/5289006 to your computer and use it in GitHub Desktop.
Fluid width container with three centred columns
<!DOCTYPE HTML>
<html>
<head>
<title>Center the divs</title>
<style>
body {
text-align: center;
margin: 0;
}
.outer {
width: 100%;
}
.inner {
width: 33%;
min-height: 200px;
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: top;
font-family: Arial, Helvetica, sans-serif;
margin: 0 auto;
}
.inner h1 {
font-size: 24px;
}
.inner p {
text-align: left;
line-height: 14pt;
font-size: 12px;
padding: 5px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<h1>Column 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque tempus quam feugiat euismod. Sed hendrerit mollis dolor, nec pretium turpis fermentum elementum. Pellentesque posuere, metus at volutpat aliquet, tortor turpis tincidunt libero, feugiat dictum nibh lectus ac magna. Ut dolor libero, semper ac posuere sit amet, consectetur sed nisi. Cras vel turpis neque. Suspendisse commodo metus a lacus lacinia sodales. Praesent mauris orci, condimentum sit amet ultrices ut, euismod eu nisl. Morbi eleifend, leo pretium semper suscipit, mi massa posuere tellus, in congue mauris ligula lacinia nisl. Nullam et nisi nec tortor fringilla consectetur eu euismod elit.</p>
</div>
<div class="inner">
<h1>Column 2</h1>
<p>Suspendisse potenti. Pellentesque imperdiet rutrum justo, a varius lectus tincidunt ut. Etiam dui lorem, iaculis et mattis vitae, rhoncus sed justo. Cras elementum vulputate dapibus. Suspendisse vel diam neque, et faucibus mauris. In eget enim a elit auctor ullamcorper vel sit amet nisl. Ut sed ligula magna, quis lobortis tellus. Donec vulputate lobortis enim, et venenatis arcu tincidunt vitae. In ut blandit nibh. Proin augue leo, scelerisque eu pharetra at, rutrum vitae dui.</p>
</div>
<div class="inner">
<h1>Column 3</h1>
<p>Sed semper tellus nec nisi euismod sit amet pretium libero congue. Praesent nec mi nunc. Nulla convallis nibh quis elit imperdiet nec porta metus ornare. Quisque quam neque, placerat vel pulvinar nec, vulputate a libero. Mauris placerat gravida congue. Suspendisse potenti. In pharetra suscipit libero, et ornare quam rutrum sed. Donec nisl turpis, malesuada ut interdum id, tempor in massa. Nullam eget nulla lectus, quis egestas est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam lacinia tincidunt leo, quis posuere metus eleifend non. Maecenas auctor porttitor nulla, vitae pretium augue imperdiet porttitor. Cras arcu nunc, egestas eu rhoncus quis, ultrices condimentum ipsum.</p>
</div>
<div class="clear">&nbsp;</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment