3 equal width equal height columns

HTML & CSS
1

I know there are several articles about creating 3-column layouts, but none of them seem to quite fit what I am trying to achieve. Apart from equal width and equal height I want each column to have a different colour background and a margin. I would also like the column text to appear in the “correct” order (left, centre, right) not as some solutions have them. So far I have the following code but I know that floating the columns will not give me equal height columns. I seem to be going round in circles…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
    margin: 0;
    padding: 0;
    background: #12130a;
    color: white;
}

a {
    color: white;
    text-decoration: none;
}

#wrapper {
    font: .91em/1.6 Verdana, Arial, Helvetica, sans-serif;
    width: 90%;
    margin: 15px auto;
}

.3-columns {
    clear: both;
}
.3-columns p {
    font-size: 110%;
}
#column1, #column2, #column3 {
    width: 30%;
    float: left;
    padding: 1%;
    margin: 0;
    text-align: center;
    border: solid 1px #121212;
    border-radius: 20px;
    color: white;
}
#column1 {
    background: #6C24A0;
    margin-right: 1.5%;
}
#column2 {
    background: #7DD52A;
    margin-right: 1.5%;
}
#column3 {
    background: #3333eF;
}

#footer {
    clear: both;
    padding: 10px 0;
}
</style>
</head>
<body>
<div id="wrapper">
  <div class="3-columns"> 
    <a href="#"><div id="column1">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris purus velit, tristique eu
        ornare luctus, molestie eget ante. Suspendisse pellentesque nec urna nec varius. Nunc scelerisque
        metus vel sagittis ultrices.</p>
    </div></a>
    <a href="#"><div id="column2">
      <p>Sed dictum arcu vel ornare volutpat. Integer pellentesque augue turpis, non ornare magna
        rutrum in. In risus dolor, scelerisque nec odio sed, aliquet dignissim libero. Donec congue
        lacus.</p>
    </div></a>
    <a href="#"><div id="column3">
      <p> Ut quis libero vel est aliquam tincidunt. Cras sollicitudin tempus diam, non hendrerit
        metus iaculis ac.</p>
    </div></a>
  </div>
  <div id="footer"></div>
</div>
</body>
</html>

Thanks

2

Hi,

For ie8+ you can use the display:table and display:table-cell properties.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
	margin: 0;
	padding: 0;
	background: #12130a;
	color: white;
}
a {
	color: white;
	text-decoration: none;
}
#wrapper {
	font: .91em/1.6 Verdana, Arial, Helvetica, sans-serif;
	width: 90%;
	margin: 15px auto;
}
.columns-3 { clear: both; }
.columns-3 p { font-size: 110%; }
.columns-3 {/* classnames can't begin with a digit*/
	display:table;
	table-layout:fixed;
	width:100%;
	margin:auto;
	border-spacing:20px;/* can't use percent here*/
	word-wrap:break-word;
}
#column1, #column2, #column3 {
	padding: 1%;
	margin: 0;
	text-align: center;
	border: solid 1px #121212;
	border-radius: 20px;
	color: white;
	display:table-cell;
}
#column1 { background: #6C24A0; }
#column2 { background: #7DD52A; }
#column3 { background: #3333eF; }
#footer {
	clear: both;
	padding: 10px 0;
}
</style>
</head>
<body>
<div id="wrapper">
		<div class="columns-3"> <a id="column1" href="#">
				<div>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris purus velit, tristique eu
								ornare luctus, molestie eget ante. Suspendisse pellentesque nec urna nec varius. Nunc scelerisque
								metus vel sagittis ultrices.</p>
				</div>
				</a> <a id="column2" href="#">
				<div>
						<p>Sed dictum arcu vel ornare volutpat. Integer pellentesque augue turpis, non ornare magna
								rutrum in. In risus dolor, scelerisque nec odio sed, aliquet dignissim libero. Donec congue
								lacus.</p>
				</div>
				</a> <a id="column3" href="#">
				<div>
						<p> Ut quis libero vel est aliquam tincidunt. Cras sollicitudin tempus diam, non hendrerit
								metus iaculis ac.</p>
				</div>
				</a> </div>
		<div id="footer"></div>
</div>
</body>
</html>

For ie7 and under I suggest you just use conditional comments and float the items as you had before.

3

Cool - many thanks, Paul. Great stuff!