CSSテクニックコミュのCSSで底辺を揃えるには？

こんにちは。
CSSで高さ方向の制御に関して、アドバイスを頂きたいと思います。

現在CSSで以下のとおりにしています。

#main {
width:200px;
height:600px;
}

#medium {
width:200px;
height:400px;
}

#bottom {
width:200px;
height:200px;
}

htmlは以下のとおりにしています。

<body>

<div id="main">
<p>外枠</p>
</div>

<div id="medium">
<p>中間ユニット</p>
</div>

<div id="bottom">
<p>ボトムユニット<br>
出来る事であれば中間ユニットを無くし、底辺を揃えたい。</p>
</div>

</body>

とする事で<div id="bottom">要素を下げ<div id="main">要素の底辺と、結果底辺を揃えています。

<div id="bottom">要素と、<div id="main">底辺を揃えるにめに<div id="medium">要素を入れています。
<div id="medium">を入れないで底辺を揃える事は出ないでしょうか。

もう少しスマートにできる方法が有ればアドバイスを頂ければ幸いです。

画像の底辺と揃えるには、vertical-align が利用できると思いま
すが親要素の無い場合、何か良い方法が有るでしょうか。
positionも試してみましたが、思いとおりになりませんでした。

コメント(10)

最初
全て
最新の40件

[3] mixiユーザー 06月29日 20:10

<?xml version='1.0' encoding='Shift_JIS'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang='ja' xml:lang='ja' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>底辺揃えテスト</title>
<style></style>
</head>
<body>

<div class="section" id="content">
<div id="main">
<p>外枠</p>
</div>

<div id="bottom">
<p>ボトムユニット<br>
出来る事であれば中間ユニットを無くし、底辺を揃えたい。</p>
</div>
</div>

</body>
</html>

[4] mixiユーザー 06月30日 10:43

baban さん

アドバイスをありがとうございました。
position: の使い方が判り勉強になりました。

[5] mixiユーザー 07月04日 18:02

新たにトピ立てするほどではないと思ったので、便乗させてもらいます。

.a{width:100%;}
.b{float:left;border:1px solid black;}

<div class="a">
<div class="b">あいうえお</div>
<div class="b">あいうえお<br>あいうえお</div>
<div class="b">あいうえお<br>あいうえお<br>あいうえお</div>
</div>

元々tableで組んでいたものをCSSで組みなおしたのですが、上記の例ですと、底辺が揃いません。
テキスト量の関係でheightで完全固定するのは現実的ではなく、可変でtableのように一番高いところに揃えたいのですが、それはできるのでしょうか？

[6] mixiユーザー 07月04日 18:15

以前こちらのコミュで僕も質問した事があります。
http://mixi.jp/view_bbs.pl?id=2259264&page=all

JavaScriptで対象となるdiv要素の高さを調べて、一番高いもののheightをすべての対象に適用する…　なんて言う方法も考えたのですが、結局背景画像を使う案を採用する事に僕はしました。

[7] mixiユーザー 07月05日 07:22

mixさんありがとうございます。
既出ネタでしたね・・・
自分も背景画像を使う方向で試してみたいと思います。

[8] mixiユーザー 07月05日 16:17

試してみて無事高さを揃えることができたのですが、1つ気になることが。

>>5で書いたソースをちょっと改変したものですが、

.a{width:800px;margin-left:0px;}
.b{float:left;margin-left:10px;border:1px solid black;}

<div class="a">
<div class="b">あいうえお</div>
<div class="b">あいうえお<br>あいうえお</div>
<div class="b">あいうえお<br>あいうえお<br>あいうえお</div>
</div>

FF2.0だとそのまま左端10px空くのですが、IE(Sleipnir)だと(多分)20px空いてしまいます。b要素間は10px空いてます。
a要素をwidth:790px;margin-left:10px;として、b要素の1つ目のmargin-leftを0pxとすれば見た目は問題ないですが、根本的解決になってませんし・・・

これはIEのバグなのでしょうか？