ぺんろぐ

Windows、Webデザイン、ネット、ゲームなど中心とした気まぐれ更新ブログ。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スポンサードリンク

  1. --/--/--(--) --:--:--|
  2. スポンサー広告

[CSS]divのfloatレイアウト時に高さ(height)を揃える方法

元々tableベースだったサイトレイアウトを
divに変えようと思った時に、結構悩まされるdivタグのfloat。
ちゃんと覚えているうちにメモします。
overflow:hiddenのやり方です!

ソースとかだらだら書いても読みにくいと思うので
シンプルにいきます!


たとえばaとbを左右に並べたいレイアウトを作りたいとき
css-height1.jpg
#aは左サイドのdiv #bは右サイドのdiv
#zはwrapper(中に#aと#bを入れている)とします。

内容(文字や画像)の量によって、aとbの高さが合いません。
bの高さを100%指定しても
このようにaとbが合いません。
それぞれheightの高さをピクセル指定してしまえば簡単ですが、
実際は内容が増えたり減ったりするので、そうもいきません。

というわけで、cssに以下のような記述をします。

#aは
padding-bottom:32767px;
margin-bottom:-32767px;


#bも
padding-bottom:32767px;
margin-bottom:-32767px;


#zは
overflow: hidden;

css-height2.jpg
この記述で↑のようになると思います。

Dreamweaver上では、ものすごい下にスクロールしてしまうようですが、
プレビューでブラウザで見ると、ちゃんと揃っていました。

スポンサードリンク

  1. 2011/08/11(木) 01:13:52|
  2. WEBデザイン
  3. | コメント:0

コメント

コメントの投稿

管理者にだけ表示を許可する

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。