人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

スタイルシート(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;
}





●質問者: pochi1234
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CSS margin padding TOP スタイルシート
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● mamekko
●50ポイント
vertical-align:super;

で良いと思います。

参考までに、

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

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

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

◎質問者からの返答

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

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

ありがとうございます。


2 ● koriki-kozou
●100ポイント ベストアンサー

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

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

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

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


>rightcolumn { vertical-align:top; }

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


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

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


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

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

◎質問者からの返答

解決できました。

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ