- 締切済み
カラムの高さを揃える
amuamu00の回答
- amuamu00
- ベストアンサー率62% (36/58)
左下のboxLEFTをカラムA、右のboxRIGHTをカラムBとさせて下さい。 おそらく、カラムAとカラムBの底を同じ用にするのは無理です。 方法があるとすれば、全カラムに対してheightを指定して、同じ高さにするしかありません。 しかし、そういった方法を望まれているわけではないと思います。 多分ですが、背景を揃えたい、ということですよね？ カラムBが伸びた場合は、カラムAの背景も下に延びる、、、というような形だと思います。 的外れだったら申し訳ないですが、これであれば方法があります。 それは、カラムAでもBでもなく、「contents」に背景指定することです。 そうすれば、カラムAが延びれば自動的にcontentsの背景が延びることになるので、 擬似的にカラムBが延びているかのように見えます。 このとき、contentsの背景に指定する画像は、CSSでrepeat-yにすること、 カラムAとカラムBにfloatを使っているのであればclear:both;等で解除すること、 背景画像はカラムAの背景とカラムBの背景を合わせたようなものを作ること、 などが必要になります。
関連するQ&A
- 【CSS】横３カラム：左右は固定pxで中央カラムはが残り幅となるにはどうすれば？
http://www.amazon.co.jp/ のように、 横３カラムで、全体は１００％、一番左カラムと一番右カラムは固定px、真ん中のカラムは100%-左カラム固定pxー右カラム固定pxで、 ウィンドウをリサイズしても、この状況が変わらない・・・ というようなCSS（JSもからむのでしょうか？）は、どのようにすればつくれるのでしょうか？ <div style="float:left;"> 左カラム </div> <div style="float:right;"> 右カラム </div> <div> 中央カラム </div> 。。。だと、中央カラムが縦長になるとはみ出してしまいますよね・・・。 どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- 3カラムのサイトでfloatができない
３カラムのホームページを作っているのですが、 中央と右のカラムがどうしてもfloatできません。。 左カラムをfloat:leftにして、中央と右のカラムを#contentsBoxで囲ってfloat:rightさせています 【ＨＴＭＬ】 <div id="wrapper_2"><!--div id wrapper_2 START--> <div id="contentsBox"><!--div id contentsBox START--> <div id="560"><!--div id 560 START--> 中央カラム </div><!--div id 560 END--> <div id="175"><!--div id 175 START--> 右カラム </div><!--div id 175 END--> </div><!--div id contentsBox END--> <div id="205"><!--div id 205 START--> 左カラム </div><!--div id 205 END--> </div><!--div id Wrapper_2 END--> 【ＣＳＳ】 /*+++wrapper_2++++++++++++++++++++++++++*/ #wrapper_2 { width: 984px; background-color:#fff; padding: 8px; margin: 10px auto 10px auto; overflow: hidden; } /*+++contentsBox++++++++++++++++++++++++++*/ #contentsBox { width: 757px; float: right; } #contentsBox:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } /*+++左カラム+++++++++++++++++++++++++++++*/ #205{ width: 205px; margin: 0 22px 0 0; float: left; } /*+++中カラム+++++++++++++++++++++++++++++*/ #560{ width: 560px; float: left; } /*+++右カラム+++++++++++++++++++++++++++++*/ #175{ width: 175px; float: right; margin-left: 22px; } まだ勉強中なので、初歩的なミスなのかもしれませんが、 どうしても中央カラムの下に右カラムがきてしまいます。 （ドリームウィーバーで見たら、望み通りの配置になっているのですが、ブラウザでチェックすると、中央カラムの下に右カラムがきてしまいます） アドバイスいただければ嬉しいです。 よろしくお願い致します。
- ベストアンサー
- CSS
- 2カラムの左固定、右変動幅にするには？
CSS初心者です。 ページ幅に合わせて右カラムの幅を変えたいのですが 左カラムを固定にして右カラムだけ変動させるにはどのようにしたら良いですか? カラム全体をBOXで囲んで幅を決めてその中で 左カラムの幅を固定にして 右カラムの幅を100％としたところ 右カラムのフローティングが崩れて左カラムの下に表示されてしまいます。
- ベストアンサー
- CSS
- 横並びのカラム内で画像の高さを基準にして合わせたい
お疲れ様です。 横並びのアルバムについて質問です。columnボックスに見出し＜ｈ４＞と画像、説明文の＜ｐ＞が入っています。見出しの文字数と説明文の長さは一定ではないので、column内の要素の位置がそれぞれ違います。 これを画像の頭部分で高さを揃えることはｃｓｓだけで実現できるでしょうか。 見出しと説明文どちらかがなければcolumnにinline-blockを指定してあげればよいのですが。 お知恵を貸していただければと思います。 ※画像の大きさは一定です。 <div class="column4"> <div class="column"> <h4>■ダミーテキスト</h4> <div class="image"><img src=".img" alt=""></div> <div class="text"><p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p></div> </div> <div class="column"> <h4>■ダミーテキスト</h4> <div class="image"><img src=".img" alt=""></div> <div class="text"><p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p></div> </div> <div class="column"> <h4>■ダミーテキスト</h4> <div class="image"><img src=".img" alt=""></div> <div class="text"><p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p></div> </div> <div class="column"> <h4>■ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</h4> <div class="image"><img src=".img" alt=""></div> <div class="text"><p>ダミーテキスト</p></div> </div> </div>
- ベストアンサー
- CSS
- ３カラム→２カラムになるhtml・cssの書き方
３カラム→２カラムになる、html・cssの書き方について、ご教授お願いします。 ブログで、左サイド（サブ）、センター（メイン）、右サイド（サブ）を制作しています。 トップページは３カラム校正。 詳細記事（２階層目）に入ると、右サイドはなくして、その分センターを右に伸ばしたいと思っています。 ※文章だとわかりづらいので、図にしてみました。 http://kiyu0228.web.fc2.com/sample.gif このように制作したい場合、html・cssをどのように書くのが最適でしょうか？ ちなみに、SEO対策のため、htmlでのdivの書き順は、 センター（メイン）→左サイド（サブ）→右サイド（サブ）で書き表したいです。 また、なるたけ右サイドをコメントオフ、または削除するだけで、反映される書き方が望ましいです。 いろいろと条件が多くて申し訳ござません…。 ご教授いただけると、幸いです。 どうぞよろしくお願いいたします。
- 締切済み
- CSS
- ＣＳＳレイアウトの２カラム左メニューでコンテンツを先にＨＴＭＬに記述できる方法をおしえてください。
趣味でＨＰを作成しております。 一般的なＣＳＳレイアウト２カラム左メニューにしたいのですが、 ＨＴＭＬ部分で左メニューよりコンテンツを先に記述し、 ＣＳＳで左メニューで右にコンテンツがくるようにしたいです。 現在のＣＳＳは * { margin:0; padding:0; } .wrapper { width: 750px; margin: 0 auto; } .header { width: 750px; height: 100%; } .main { width: 750px; } .menu { float: left; width: 200px; } .contents { float: left; width: 550px; } .footer { clear: both; width: 750px; height: 100%; } .menu ul { list-style: none; } このような記述です。 つづきましてＨＴＭＬ部分は <body> <div class="wrapper"> <div class="header"> ヘッダー部分 </div> <div class="main"> <div class="contents"> コンテンツ部分 </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> このような感じです。 しかしこれだとＨＴＭＬ部分はコンテンツが先にきておりますが、 メニューが右になってしまいます。 これをＨＴＭＬ部分を変えずにＣＳＳでメニューを左に配置する方法はありますでしょうか？ １週間くらい試行錯誤したのですが、できませんでした。 お詳しい方教えてください。
- ベストアンサー
- 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
- フロートを利用した2カラムレイアウト
お世話になります。 HTML＋CSSにてサイト制作をしております。IE6のバグだと思うのですが、フロートを利用した2カラムレイアウトの段組みの間の空き具合をうまく調整することができません。なぜでしょうか？？ 形は、左右の2カラムで成り立っており、右半分に重要なコンテンツ部分（主にテキスト）、左半分にメニューをおいています。 【HTML】 <div id="wrapper"> <div id="right"> □□□□□□□□□□□□□□□□□□ □□□□□□□□□□□□□□□□□□(重要テキスト) </div> <div id="left"> □□□□□□□□□(メニュー） </div> </div> 【CSS】 #wrapper{ width:800px; background:url();←省略 } #right{ float:right; width:680px; } #left{ float:left; width:100px; } という感じです。それで、800px－(680px＋100px)＝20pxを左右の段組みの間に空きスペースとして確保したいのですが、IE6だとうまくいきません。 Firefox,safariなどでは、仕様通り左カラムは左に寄り、右カラムは右によるため、左右の段組みの間に20pxの空きが出るのですが、IE6だと左右の間にスペースはなく、かわりに右カラムの右(つまり、一番右）が空いてしまうのです。 floatを両方ともrightにして左カラムに右マージンorパディングを入れてみたのですが、今度はカラム落ちしてしまいます。 どうすれば、IE6で左右の間にスペースがある2段組みができるのでしょうか？？なにか根本的に間違ってるのでしょうか？
- ベストアンサー
- HTML
- CSSのボックス表示の違いについて
現在、以下のようなボックス配置を作っています。 ｜ボックス左｜｜ボックス右｜ <div class="clear"></div> ｜ボックス左｜｜ボックス右｜ <div class="clear"></div> ｜ボックス左｜｜ボックス右｜ ボックス左は左フロート ボックス右は右フロート にしてあります。 どちらも幅は250pxにしていしてあります。 そして、その中にこのように文章と画像を入れていきたいのですが、 ｜画像１ ｜｜文章 ｜ ｜ ｜｜画像２ ｜ <div class="clear"></div> 実際にやってみると、ボックスの中身の長さが右の方が長い場合、 ｜画像１ ｜｜文章 ｜ ｜画像２ ｜｜ ｜ <div class="clear"></div> このように、画像２が左のボックスの下に表示されてしまうのです。 FFとSafariならこのように ｜画像１ ｜｜文章 ｜ ｜画像２ ｜ ｜文章 ｜ ｜画像３ ｜ <div class="clear"></div> どれだけ中身を増やしても、右のボックスが下に伸びて縦長になっていくだけなのですが、どうしてIEだと上のように隣のボックスの下に画像や文章が回り込んでしまうのでしょうか。どうしてもわかりません。 ｜画像１ ｜｜文章 ｜ ｜画像２ ｜｜画像２ ｜ ｜画像３ ｜｜文章 ｜ ｜画像４ ｜｜画像３ ｜ <div class="clear"></div> このように、左のボックスにも中身がある場合は右ボックス内のものは下に回り込みません。 何がいけないのかわかりません。おしえてください。 よろしくお願いします。
- ベストアンサー
- CSS
- 3カラムのカラム落ちについて質問です。
3カラムのカラム落ちについて質問です。 IE6だけ3カラムのうち右カラムだけカラム落ちしてなおりません。 ネットで検索して色々試した結果「clear: right;」を追加したら右に戻ったのですが、今度は隙間ができました。 <div id="wrap"> <div id="left">左カラム</div> <div id="left">メインカラム</div> <div id="left">右カラム</div> </div> という形です。 --CSS-- #wrap{ width: 970px; margin: 0 auto; background-color: #FFFFFF; height: 100%; min-height: 100%; position:relative; overflow: hidden; } #left{ width: 175px; margin: 15px 15px 0 15px; padding: 0; float: left; display: inline; } #contents{ width: 560px; float: right; margin-top: 15px; display: inline; clear: right; } #right{ width: 175px; margin: 15px; float: right; display: inline; clear: right; } です。 それぞれの中にはmargin やpaddingを使っています。 2日間それで悩まされていますができずに困っています。 IE6以外はすべて大丈夫なので、分かるかた教えてください。
- ベストアンサー
- ホームページ作成ソフト
お礼
丁寧にお教えいただき、ありがとうございます。 contentsには背景画像を使用しないで、カラムごとに背景をつけてそろえたかったので、 無理ということが理解できただけでもありがたく思います。