2008年1月2日水曜日

clearfixで段組の問題を回避

親のブロック要素の高さが子のブロック要素の高さより低くなってしまう現象
(css2.0の仕様だそうです。)
を回避する方法をclearfixというらしい。

以下のような2段組でつくると
<div id="header">
  ...(略)...
</div>
<div id="content">
<div id="content_l" style="float:left;">
  ...(略)...
 </div>
<div id="content_r">
  ...(略)...
</div>
</div>
<div id="footer">
...(略)...
</div>

content_lの高さが大きくなったときにcontentの高さが
自動的に大きくならないのでfooterがcontent_lとかぶってしまっていた。

http://norisfactory.com/stylesheetlab/000038.php
を参考にclearfixクラスを作成しcontentに適用することで
解決できた。

0 件のコメント: