• ベストアンサー

左○○px、右は残りの幅(100%-左px)ってできますか?

CSSでレイアウトを組みたいと思ってます。 要は左と右に2つに割って左はpx単位で指定して、右は残りのサイズ、ウインドウのサイズ変更に伴って可変するようにレイアウトを組んでいきたいと考えています。 発想力が足りないのか、基礎的な知識が足りないのか・・・ どちらも足りないとは思いますが、おしえていただければ幸いです。 どうかよろしくお願いいたします。

  • HTML
  • 回答数2
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

とりあえずdivでフロートするだけでもよいかと <style> #l{ width:200px; background-Color:blue; float:left; } #r{ width:auto; background-Color:red; } #b{ width:auto; background-Color:green; } </style> <div id="l">test</div> <div id="r">test</div> <div id="b">test</div>

その他の回答 (1)

  • xxi-chanxx
  • ベストアンサー率37% (556/1484)
回答No.1

可能です。 こちらのサイトを参考にしてください。 詳しく説明しているので分かりやすいかと。 CSSレイアウト実践講座>2カラムCSSレイアウト実践講座 http://css.uka-p.com/index_2column.shtml

関連するQ&A

  • 左100px 中100% 右100px

    CSSを利用して、 左100px 中100% 右100px とし、 中のサイズはブラウザのサイズを変更しても変わらないようにしたいのですが、 floatやmarginなどを駆使しても 左 中 右 のように回り込んでしまったり、 中のサイズが文字数分だけしか幅が広がらなかったりします。 テーブルなら簡単にいくのですが。。。 CSSだけで 左100px 中100% 右100px のデザインを描画するのは可能でしょうか?

    • ベストアンサー
    • CSS
  • 2段組レイアウトのCSSについて。左幅:可変/右幅:固定

    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 ;}

    • ベストアンサー
    • HTML
  • 【CSS】左右可変、中央固定の3カラムレイアウト

    ボックス3つを横一列に、 center:画面中央配置、幅は900px固定 left:残りの左領域全て(幅可変) right:残りの右領域全て(幅可変) というレイアウトをしたいのですが、CSSでの指定方法が解らず困っています。 2カラムや左右固定・中央可変の3カラムレイアウトは様々なサイトで解説されているのですが、 このパターンは中々無いようで見つかりませんでした。 良い方法をご教示いただければと思います。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • OKwebの左メニューと右のメイン側のフォントサイズは?

    こんばんわ。 自分でもHPを作りたいのですが、 フォントサイズを変えたいと思っています。 ちょうどOKwebの文字の大きさの違いがわかりやすいと思ったのですが、 OKwebの左メニューと右のメイン側のフォントサイズを教えてください。 その際、フォントサイズは cssで15pxや15ptなど指定するのと <font size="+1">など指定するのと どれがいいのでしょうか。

    • ベストアンサー
    • HTML
  • ヘッダー・左カラムは固定、右カラム可変のレイアウト

    CSSでレイアウトを制作中なのですが、途中から分からず止まっております。 今の状況は縦に可変した時、左カラムのスクロールバーが最大まで表示されない状態です。また、右カラムは途切れてしまいます。 height100%に対し、ヘッダでピクセル指定しているからだと思うのですが。 ■CSS *{ margin:0px; padding:0px; } /** html */ html,body { height:100%; min-height:500px; overflow-y:hidden; } /** ヘッダ */ #header { height:125px; width:100%; } /** 左・右カラムの囲い */ #container { height:85%; margin-left:400px; } /** 左カラム */ #menu { float:left; height:85%; margin-left:-400px; overflow:auto; width:400px; } /** 右カラム */ #main{ float:right; height:100%; margin-left:430px; overflow:auto; width:100%; } /** フッタはありません */ ■HTML側 <div id="header"> ヘッダ </div> <div id="container"> <div id="menu"> 左カラム </div> </div> <div id="menu"> 右カラム </div> 以上です。 理想のレイアウトが、GoogleマップもしくはYahoo!マップの様に組みたいのですが・・・ http://maps.google.co.jp/ Googleマップ http://map.yahoo.co.jp/  Yahooマップ どなたかお力添えをお貸しください。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • PDFを2枚から1枚にまとめるとき、右から左にした

    表題のとおりです。 現在雑誌の見開き2ページx100程のデータがあります。 これを、見開き2ページを1ページにまとめたいのです。 AcrobatのPDF印刷、レイアウト設定→シートごとのページ数:2 で出力しています。 ただ右→左読みの雑誌なのですが、1ページにまとめると 左→右の順番でまとまってしまいます。 印刷のレイアウト設定の項目でも左が1で右が2になっています。 読み上げ方向設定は『右から左』へは変更してあり、 実際表示も右→左となっています。 やりかたはどのような方法でもかまいません。 宜しくお願いいたします。

  • cssで指定した文字の大きさがIE6とIE7で違う

    cssでレイアウトを指定したサイトを作りました。 IE6、Opera9、Firefox2でうまく表示ができました(微妙にFirefoxだけ文字の大きさが小さいですが、ほぼレイアウトにあっています)。 が、先日IE7で確認するとフォントサイズが大きくなっていました。 cssではfont-sizeを、bodyが12px、各id、classはそれぞれ11px、10pxとしました。 IE7だと13pxくらいに見えてしまい、レイアウトをはみ出て表示されています。 IE7をIE6と同じフォントサイズにするにはどのように指定すればよいのでしょうか? ちなみに文字の大きさは固定でブラウザで大きさを変更できないようにしたいのです。 すみませんがよろしくお願いします。

  • CSSで画面サイズを縮小するとレイアウトが大きく崩れてしまう

    CSSとXHTMLで、左と右に分かれただけのデザインという少し変わったレイアウトで作ってみたのですが、画面サイズを変更(縮小)すると右側のBOXがすべて左側の下に回り込んでしまいます。 できればスクロールバーなどを出現させて、レイアウトが崩れないようにしたいと考えています。 色々いじくっていたらめちゃくちゃになってしまったのですが、一応CSSを掲載しておきます。 また、左側を○○pxで、右側を残りのサイズというようなwidthの指定の仕方ってあるのでしょうか? frameとかだと*で対応するみたいなんですが・・・ ひとまず、周り込を回避する方法が優先です。 どうかよろしくお願いいたします。 @charset "shift_jis"; body { margin: 0px; height: 100%; padding: 0px; font-size: 12px; line-height: 150%; } html { height: 100%; } img { border: none; vertical-align: bottom; } #left { background-color: #666666; width: 350px; float: left; min-height: 100%; height: 100%; } #right { height: 100%; padding: 35px 0 0 0; min-height: 100%; width: auto; margin: 0 0 0 350px; }

    • ベストアンサー
    • HTML
  • cssで文字サイズ指定、ptでもpxでも指定できますが、違いは?

    CSS初心者です。初歩的ですが、教えてください。 文字サイズの指定の単位はいろいろあるみたいですが、 皆様はどの単位を使っていますか? 例えば、ptとpxどちらも結構細かくサイズを指定できますが、 どちらかを選ぶ理由がいまのところありません。 どちらを何故使うのか、違いはあるのか・・・? よろしくお願いします。

    • ベストアンサー
    • HTML
  • 2カラムレイアウトでサイズ可変なCSSレイアウ

    例えば、右、左の2つのエリアにわかれた2カラムレイアウトで、真ん中の境界線を右左にずらすことで、ウィンドウサイズはそのままでエリアの領域が可変になるようなレイアウトをCSSなどで実現したいです。 「ウィンドウサイズ 可変」などで検索すると、1つのウィンドウサイズの可変、レスポンシブデザインやリキッドデザインなどの解説はたくさん出てくるのですが、意図することのページがでてきません。 以下のページが実際にやりたいことに似ているのですが、4つのエリアに分かれた領域を自由にサイズを大きくしたり、小さくしたり変更できます。 http://jsfiddle.net/hrfmmymt/f8zs5wsv/ コードを読んでいけば、どうやってやればいいのかわかるかもしれませんが、できれば簡単なサンプルで解説したサイトがあれば助かります。 よろしくお願いします。

    • ベストアンサー
    • CSS