スタイルシート(CSS)の vertical-align:top; が反映されなくて困っています。


以下の構成でdivレイアウトを組んでいるのですが、rightcolumnの中の文字を上寄せにしたいです。divには以下の名前のidを指定しています。
お願いします。

----------wrapper-------------------------------
header
navigation
 -----faux-------------------------------------
 leftcolumn  rigntcolumn  clear
 ----------------------------------------------
         footer
------------------------------------------------

#wrapper {
margin:0 auto 0 auto;
padding:5px;
width:850px;
}

#faux {
margin:0px;
padding:0px;
width:100%;
}

#header {
line-height:50px;
margin:0px;
padding:0px;
width:100%;
}

#navigation {
margin:0 auto 0 auto;
padding:0px;
}

#leftcolumn {
float:left;
margin:0px;
padding:5px;
position:relative;
width:75%;
}

#rightcolumn {
vertical-align:top;
float:right;
margin:0px;
padding:5px;
width:25%;
}

#footer {
clear:both;
align: center;
text-align:center;
margin:0 auto 0 auto;
padding:5px;
width:100%;
}

.clear {
clear:both;
}


回答の条件
  • URL必須
  • 1人3回まで
  • 13歳以上
  • 登録:2010/04/27 08:00:28
  • 終了:2010/04/27 20:03:30

ベストアンサー

id:koriki-kozou No.2

koriki-kozou回答回数480ベストアンサー獲得回数792010/04/27 10:18:08

ポイント100pt

vertical-align-スタイルシートリファレンス

http://www.htmq.com/style/vertical-align.shtml

>vertical-alignプロパティを適用できるのは、インライン要素とテーブルセルであり、ブロックレベル要素には適用できません。

>従って、 vertical-alignプロパティでボックス全体の縦方向の配置や、ブロックボックス内のテキストの縦方向の位置などを制御することはできません。


>rightcolumn { vertical-align:top; }

この指定は上記事由により無効


>中の文字を上寄せにしたい

div内テキストは何もせずとも上位置に配置される


他のdivとの兼ね合いで上に位置しているように見えないだけでしょう

各divの配置を理解しやすくするため背景色を一時変えて確認してみてください

id:pochi1234

解決できました。

divの背景色を変えてみたところ、文字が下になってた理由が、rightcolumnのワイドが大きすぎるのが原因でした。

divはデフォルトで縦なんですね。vertical-alignの指定ができなかったですか。

ありがとうございました。

2010/04/27 20:02:29

その他の回答(1件)

id:memamii No.1

mamekko回答回数11ベストアンサー獲得回数12010/04/27 11:47:34

ポイント50pt
vertical-align:super;

で良いと思います。

参考までに、

http://www.zspc.com/stylesheets/css/ref/desc2.html

ちなみに、このスタイル設定でうまく配置できていますか?

このままでは、paddingとwidthのかねあいでIE6,7,firefox共にうまくいきませんでした。

id:pochi1234

その方法ではうまくできませんでしたが、

参考URLはとても役に立ちました。

ありがとうございます。

2010/04/27 20:00:10
id:koriki-kozou No.2

koriki-kozou回答回数480ベストアンサー獲得回数792010/04/27 10:18:08ここでベストアンサー

ポイント100pt

vertical-align-スタイルシートリファレンス

http://www.htmq.com/style/vertical-align.shtml

>vertical-alignプロパティを適用できるのは、インライン要素とテーブルセルであり、ブロックレベル要素には適用できません。

>従って、 vertical-alignプロパティでボックス全体の縦方向の配置や、ブロックボックス内のテキストの縦方向の位置などを制御することはできません。


>rightcolumn { vertical-align:top; }

この指定は上記事由により無効


>中の文字を上寄せにしたい

div内テキストは何もせずとも上位置に配置される


他のdivとの兼ね合いで上に位置しているように見えないだけでしょう

各divの配置を理解しやすくするため背景色を一時変えて確認してみてください

id:pochi1234

解決できました。

divの背景色を変えてみたところ、文字が下になってた理由が、rightcolumnのワイドが大きすぎるのが原因でした。

divはデフォルトで縦なんですね。vertical-alignの指定ができなかったですか。

ありがとうございました。

2010/04/27 20:02:29

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません