[CSS] 左右の高さがキッチリ揃うCSS Tableレイアウトのサンプル

記事内にプロモーションを含む場合があります。

Csstable

こちらのCSS Tableは、左右で1セット。
ブログの記事などで利用する際には大変便利です。 

<div class="container clearfix">
	<div class="main">左</div>
	<div class="sidebar">右</div>
</div>
.main, .sidebar {
	float: none;
	padding: 20px;
	vertical-align: top;
}
.container {
	display: table;
}
.main {
	width: 400px;
	background-color: LightSlateGrey;
	display: table-cell;
}
.sidebar {
	width: 200px;
	display: table-cell;
	background-color: Tomato;
}

[ Equal Column Height With CSS ]