Recently I’ve found it necessary in a couple of my projects to set up a layout with more than one column of lengths which would vary between pages (i.e. on one page the right-hand column might be longer, on another the left-hand might be). In my searches for a solution I found a couple of different schools of thought on the best way to go about this, but I wanted to pass along the way which has seemed to work best for me.
Here’s the basic markup and styling for a simple two-column layout:
<html>
<head>
<title>Two columns!</title>
<style type="text/css">
#wrap { width: 800px; }
#column1 { width: 350px; background-color: #f00; float: left; }
#column2 { width: 425px; float: left; margin-left: 25px; background-color: #00f; }
</style>
</head>
<body>
<div id="wrap">
<div id="column1">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
</ul>
</div><!– End Column 1 –>
<div id="column2">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</p>
</div><!– End column 2 –>
</div><!– End wrap –>
</body>
</html>
As you can see, the right-hand column is considerably longer than the left-hand one, which might cause some problems with your layout if you’re trying to go, say, for one cohesive square.
To get started, you need to add enough padding to both columns that they will each absolutely be longer than their fellow column no matter how much longer they might be. Therefore, to each column, add some ridiculously large padding number, like so:
#column1, #column2 { padding-bottom: 5000em; }
Reload your page and you’ll find that the columns now stretch an absurdly long amount. We can counteract that by adding a negative margin of the same amount as the padding…
#column1, #column2 { padding-bottom: 5000em; margin-bottom: -5000em; }
…and causing the container div to hide the excess space with the “overflow” property.
#wrap { width: 800px; overflow: hidden; }
And there you have it. Simple even-columned layout which will remain even, no matter which column has more content at any given time.
If you have a thought on a way to improve this, notice a typo or other error, or have another method you use for this purpose, please feel free to leave a message and let me know!