2列（以上）のブロックレベル要素でコンテンツの量に左右されずに見た目の高さをそろえる方法です。
調べた結果、コレが一番しっくりきましたので紹介させていただきます。
発案者様にはいつも脱帽ですね 
【xhtml】
<div id="container"> <div id="columnA"></pre> <h2>コラムA</h2> <p>texttexttexttexttext</p> <!-- /section --> </div> <div id="columnB"> <h2>コラムB</h2> <p>texttexttexttexttexttexttexttexttexttext</p> <!-- /section --> </div> <p id="containerBtm"> </p> <!-- /container --> </div> <pre>
【css】
div#container {background:url(画像01.gif);}
div#columnA {
float: left;
width: 200px;
border-top: 2px solid #ccc;
margin-right: 10px;
}
div#columnB {
float: left;
width: 200px;
border-top: 2px solid #ccc;
}
p#containerBtm {
clear: both;
height: 10px;
background: url(画像02.gif) no-repeat bottom;
font-size: 10px;
line-height: 10px;
}
親ボックスに背景画像（画像01.gif）を指定します。
段組ボックスの直下に、底辺画像（02.gif）を指定します。
clear:bothで背景画像が一面に表示され高さが揃ったように見えます。
これでフォントサイズが可変でも崩れませんね。
スバラシイ 
【参考サイト様】
The Ham Media
Like@Lunatic Blog
Related Posts B
- Newer: 【photoshop】ぼやけた写真をくっきり加工する方法をざっくり和訳
- Older: 【Pulg-ins】ソースを見やすくするSyntaxHighlighter Evolvedを導入した
Comments（コメント欄）:0
Trackbacks:0
- Trackback URL for this entry
- http://www.kanamel.com/2010/04/01/%e3%80%90css%e3%80%91%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%83%ac%e3%83%99%e3%83%ab%e8%a6%81%e7%b4%a0%e3%81%ae%e6%ae%b5%e7%b5%84%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%88%e3%81%ae%e5%ba%95/trackback/
- Listed below are links to weblogs that reference
- 【css】ブロックレベル要素の段組レイアウトの底辺の高さを揃える from at whim at any time...
