初めての店舗開業を成功させよう>>

http://desperadoes.biz/style/dan/1-g.html

こちらのような2段組を想定しています。
(ブラウザウィンドウのサイズを変えたりして、スタイルの効き方を確認してみて下さい。)

上記ページの例ですと、左幅:固定、右幅:可変となっていますが、

私が希望するのは、その逆です。
つまり、左幅:可変、右幅:固定です。

どのようなスタイルを指定すれば良いか、どなたか教えて下さい。
---------------------------------------------
ちなみに、上記ページのスタイルは、
http://desperadoes.biz/style/dan/
で確認できます。

「TYPE C-4 左ボックスのみ幅固定。幅 : 100%」のタイプになります。
---------------------------------------------
私の考えでは、右と左を逆にすれば、目的を達成できるのかな?
なんて思い、下のように記述してみましたが、ダメでした。

#my_navigation {margin-right: 150px;}
#my_contents {float : right ; width : 150px ;}

A 回答 (2件)

あれ、htmlも変わるんですか?


汲み取れずすみません。

その場合は、ネガティブマージンを使うといいみたいですよ。

■css/#my_contentsと#my_navigationは入れ替わっているとして
#my_contents {
width:100%;
float:left;
margin-right:-150px;
display:inline;
}
#mymain {
margin-right:150px;
}
#my_navigation {
float:left;
width:150px;
}
    • good
    • 0
この回答へのお礼

さらなる回答をどうもありがとうございます。

ネガティブマージンを利用する考え方で、目的のデザインを達成することができました。
また分からないことがありましたら、色々と教えて下さい。(^^

お礼日時:2009/11/14 17:05

右と左を逆にするだけですよ



#my_navigation { float : right ; width : 150px ; }
#my_contents {margin-right: 150px;}
    • good
    • 0
この回答へのお礼

回答をどうもありがとうございます。

HTMLソースにおいて、

<div id='my_navigation'>略</div>

<div id='my_contents'>略</div>

という順序ではなく、

<div id='my_contents'>略</div>

<div id='my_navigation'>略</div>

という順序で、

ナビゲーション(メニュー列)を右側に配置し、
尚かつ、固定幅にすることは可能でしょうか?
知りたいことは、まさに、コレなんです。
※なお、左側に配すコンテンツ列は可変にします。

---------------------
ちなみに、HTMLソースにおいて、
ナビゲーション(メニュー列)の<div>が先に登場する場合には、
おっしゃる通り、うまくスタイルが機能し、目的通りの配置となりました。

お礼日時:2009/11/14 04:48

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング