MatthewKBabbs/fix-flex-mix.css

## fix-flex-mix.css

		body {
			padding: 0 1em;
		}
		h2 { background-color: #141a00; color: #fff; margin: 0 0 auto 0; padding: .5rem;}
		h3 { padding: 0 .5rem; }
		p { padding: 0 .5rem; }
		.container {
			display: table;
			border-spacing: 1em;
			border-collapse: separate;
			background: #324100;
		}
		.flexible {
			width: auto;
			display: table-cell;
			border-spacing: 1em;
			border-collapse: separate;
			background: #fff;
		}
		.fixed {
			width: 500px;
			display: table-cell;
			border-spacing: 1em;
			border-collapse: separate;
			background: #fff;
		}

## fix-flex-mix.html
<!DOCTYPE HTML>
<html lang="en-GB">
<head>
	<meta charset="UTF-8">
	<title>Mix fixed and flexible columns, all equal heights</title>
	<link href="fix-flex-mix.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
	<h1>Mix fixed and flexible columns, all equal heights</h1>
	<div class="container">
		<div class="flexible">
			<h2>Flexible</h2>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
			<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
			<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
		</div>
		<div class="fixed">
			<h2>Fixed</h2>
			<p>This column is fixed-width with two flexible-width partners. Go on, try resizing your browser window. It'll stay the same width as the others flex. All three will be equal height no matter what.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
			<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p></div>
		<div class="flexible">
			<h2>Flexible</h2>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
			<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
			<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
		</div>
	</div>
</body>
</html>

	body {
	padding: 0 1em;
	}
	h2 { background-color: #141a00; color: #fff; margin: 0 0 auto 0; padding: .5rem;}
	h3 { padding: 0 .5rem; }
	p { padding: 0 .5rem; }
	.container {
	display: table;
	border-spacing: 1em;
	border-collapse: separate;
	background: #324100;
	}
	.flexible {
	width: auto;
	display: table-cell;
	border-spacing: 1em;
	border-collapse: separate;
	background: #fff;
	}
	.fixed {
	width: 500px;
	display: table-cell;
	border-spacing: 1em;
	border-collapse: separate;
	background: #fff;
	}
	<!DOCTYPE HTML>
	<html lang="en-GB">
	<head>
	<meta charset="UTF-8">
	<title>Mix fixed and flexible columns, all equal heights</title>
	<link href="fix-flex-mix.css" media="screen" rel="stylesheet" type="text/css">
	</head>
	<body>
	<h1>Mix fixed and flexible columns, all equal heights</h1>
	<div class="container">
	<div class="flexible">
	<h2>Flexible</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
	<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
	<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
	</div>
	<div class="fixed">
	<h2>Fixed</h2>
	<p>This column is fixed-width with two flexible-width partners. Go on, try resizing your browser window. It'll stay the same width as the others flex. All three will be equal height no matter what.</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
	<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p></div>
	<div class="flexible">
	<h2>Flexible</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
	<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
	<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
	</div>
	</div>
	</body>
	</html>