ベストアンサー

リキッドレイアウトについて

2011/08/29 22:56

リキッドレイアウトについて、メイン部分だけ可変するようにして、サイド部分は固定することは可能でしょうか？ <div style="float:left;width:？%;"></div> <div style="float:left;width:200px;"></div> <div style="float:left;width:200px;"></div>

inudaisukidesu
お礼率0% (14/5692)

その他（インターネット・Webサービス）
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

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

ベストアンサー

noname#163110

2011/08/30 00:25 回答No.1

<div style="margin:0 200px;"></div> <div style="float:left;width:200px;"></div> <div style="float:right;width:200px;"></div> でいいんじゃないでしょうか？こうすれば左右に余白もとれますよ <div style="margin:0 auto;width:900px"> 上記main/side1/side2 </div>

関連するQ&A

スタイルシートでのレイアウトについて

スタイルシートでレイアウトしたく、フリーのテンプレートからソースをもってきました。　-HTML- <div id="outline"> <div class="main"> メイン上部コンテンツ部分 </div> <div class="side"> サイド上部メニュー部分 </div> <br class="c-both"> <div class="main"> メイン下部コンテンツ部分 </div> <div class="side"> サイド下部メニュー部分 </div> <br class="c-both"> <div class="footer"> フッター部分 </div> </div> 　-CSS- #outline{ width : 750px ; text-align : left ; border : solid 1px #000000 ; } .main { width : 200px ; background : #ebebeb ; margin-bottom : 10px ; float : left ; } .side { width : 540px ; background : #ebebeb ; margin-bottom : 10px ; float : right ; } .c-both { clear : both ; } .footer{ width : 100% ; background : #ebebeb ; } そこで、"上部コンテンツ部分"と"下部コンテンツ部分"の高さを、それぞれ違う高さにしたいのですが、どうしたら良いでしょうか？あと、メイン上部コンテンツ部分・サイド上部メニュー部分、メイン下部コンテンツ部分・サイド下部メニュー部分の下に、同じように行を追加したいのですが、どうしたら良いでしょうか？スタイルシートの段組みで、非常に困っています。助けて下さいm(_ _)m
リキッドレイアウトでどうしてもわからないこと

リキッドレイアウトを作成しているのですが、どうしてもわからないことがあります。見本のサイトは：http://ieiri.net/　なのですが、 widthを狭めていくと一定のときにサイドバーがしたに回り込みます。 <div id="main"> <div id="content"></div> <div id="sidebar"></div> </div> これはおおよそ70%と30%の割合で、構成されていると思います。ただ、なぜmainを縮めていき、サイドが下に回りこんだ際に、メインの中の比率は70%:30%にならないのでしょうか。普通であれば、縮めていってもサイド分の30%は確保されているはずですが、このサイトはピッタリcontent分の比率が確保されております。よろしくお願いします。
<div>タグでサイドバーを作るときの幅の指定方法

全体を囲むdivの中にサイドバーとメインコンテンツ用のdivを入れたいと思っています。 <div id="allContents" style="width:100%;"> 　<div id="sideBar" style="float:left; width:200px;"></div> 　<div id="main" style="float:right;"></div> </div> で、このときに、右側に表示される#main部分の幅を「残り全部」にしたいのですが、 widthに何を指定したら良いのでしょうか？サイドバー部分が200px固定で、残りのメイン部分の幅はブラウザの右端までにしたいのです・・。（Javascriptで#main部分の長さを取ろうと思っているので、中に何も入っていなくても　divの大きさが一杯までなるようにしたいのです・・）ご教授よろしくお願いします。
CSSレイアウト(2列型)に関して

お世話になります。2列の左列がメインで右列がサイドバーというCSSレイアウトに関してご質問します。以下のような構造のCSSレイアウトを作成しました。 body | |-- #wrapper | | | |-- #content | | | | | |-- #main | | | | | |-- #sidebar body { background: yellow; } #wrapper { width:700px; background: white; } #content { width: 700px; background: white; } #main { float: left; width: 500px; background: white; } #sidebar { float: right; width: 200px; background: blue; } ※padding: 0;margin: 0;を実際には全てに追加してあります。 ----- 以下HTMLファイル ----- <body> <div id="wrapper"> <div id="content"> <div id="main"> <p> ・・・・・・ </p> </div> <div id="sidebar"> <p> ・・・・・・・ </p> </div> </div> </div> </body> 上記においてIE6ではメイン(#main)の高さがサイドバー(#sidebar)の高さより高い場合、サイドバーの下部は#contentで指定した白になります。しかしFirefoxではサイドバーの下の部分がbody要素に指定したyellowになってしまいます。※Firefox1.07で試しています。メイン(#main)やサイドバー(#sidebar)の高さを指定していないためと考えますが、メイン及びサイドバー共に高さを可変にするため固定値を設定したくない場合は、FirefoxでIEのように#contentの背景色(白)を反映するにはどうすればよいのでしょうか。質問が長くなりましたが、手がかりでもつかめればと思っています。どうぞ宜しくお願いします。
レイアウトがズレル

お世話になります。スタイルシートの勉強中ですが、以下のようなソースを書くものの、左右のサイドメニュー部、メイン部にズレが生じてしまいます。（XPでIE８を利用していますが、互換表示でもレイアウトが異なる）何故こうなるのか、アドバイスのほど頂戴出来れば幸いです。宜しくお願い致します。 #outline{ border: 1px solid #C0C0C0; width: 804px; margin: 13px auto 10px auto; padding: 2px; } #main{ margin-top: 0px; margin-right: 0px; width:631px; border: 1px solid #C0C0C0; padding: 2px; text-align:left; float: right; } #menu{ margin-left: 0px; margin-top: 0px; width:159px; background: #FFFFFF; border: 1px solid #C0C0C0; padding: 2px; } <div id="outline"> <div id="main"> メインメインメイン<br>メインメインメイン<br>メインメインメインメインメイン<br>メインメインメインメインメイン<br> メインメインメイン<br>メインメインメイン<br>メインメインメインメインメイン<br>メインメインメインメインメイン<br> </div> <div id="menu"> サイドメニューサイドメニュー </div> </div>
3カラムレイアウトで隙間

下記のように３カラムレイアウトを作っています [css] #wraper { float:left; } #left { float:left; width:180px; margin:0px;} #center { width:450px; margin:0px;} #right { width:120px; margin:0px; } [html] <div id="wrapper"> 　　<div id="left">左メニュー</div> 　　<div id="center">中央メイン</div> </div> <div id="right">右メニュー</div> が、それぞれの段組の間（↓の部分）に3pxほどの隙間があいてしまいます　　↓　　　↓ [左]　[中央]　[右] 隙間なくぴったりつけるにはどうすればいいでしょうか。どうぞよろしくおねがいいたします。
【HP制作】２カラムを3カラムに変更したい！

現在2カラムで運営しているサイトを3カラムに変更したいのですが、上手く出来ずに困っています。現在は、左サイドメニュー(1)、メインメニュー(2)で運営しています。ここに右サイドメニュー(3)を追加したく、下記の通りCSSに右サイドを追加したのですが、画面を確認すると、左から(1)→(3)→(2)の順番で表示されてしまいます。因みに、メインのfloatをrightに変更すると、左から(2)→(1)→(3)の順に入れ替わり、どうしても(1)→(2)→(3)の順番になりません。独学で、その場しのぎでHP作りをしてきたので、間違いに気づけずにおります。お分かりの方がいらっしゃったら、どうかよろしくお願いします。初心者レベルなので、分かり易く教えて頂けると助かります。どうぞよろしくお願いします。 ■CSS /*ページ全体の幅、レイアウトをセンタリング*/ #container { width:1130px; margin:0px auto; text-align:left; } /*ヘッダー*/ #header { width:100%; padding: 20px 0; clear:left; } /*左サイド*/ #leftside { float: left; width: 200px; } /*メイン*/ #main { float: right;　←ここを変えるとレイアウトが崩れてしまいます。 width: 700px; } /*右サイド*/　　←ここを追加しました。 #rightside { float: right; width: 200px; } /*フッター（コピーライト）*/ #footer { padding: 30px 0; width:100%; clear:both; color: #666; text-align: center; border-top: 1px solid #ccc; } ■HTML <div id="container"> </div>  <div id="main"> </div>   <div id="leftside"> </div>  　←ここを追加しました。 <div id="rightside"> </div>
CSSでブラウザごとにレイアウトが崩れたりします。

はじめまして。現在、CSS初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。 ■■■■■■　　　　■＝ヘッダー □□●●●●　　　　□＝メニュー □□●●●●　　　　●＝コンテンツ（中身）1 □□○○○○　　　　○＝コンテンツ（中身）2 □□○○○○　　　　▲＝フッター ▲▲▲▲▲▲ このようなレイアウトで組んでいるのですが、初心者なため、ひたすら「div」で囲って、さらにその中をdivで囲ってなんとかレイアウトを組みました。そこで、問題の崩れているレイアウトですが、メニュー（□）とコンテンツ（○+●）の部分の高さを「auto」にしているのですが、フッターの部分が左のメニュー（□）の高さにしかあっておらず、右のコンテンツの途中からフッターが出てきてしまいます。 ※コンテンツ（○+●）部分はさらに大枠の「right」で囲っており、メニュー部分は「left」で、両方ともdivで、高さは他と同様に「auto」トなっております。ちなみにこの現象はIE７のみでして、IE６やfirefoxなどでは正常に表示されました。全てのhtmlファイルごとに高さを指定して、divを指定すれば、解決するとは思うのですが、テンプレートを使用しているため、なんとかこのまま解決方法を見いだせればありがたいのですが、、、どうか教えていただけないでしょうか？ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFFF; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#FFFFFF; } /* 左側の設定*/ #left{ width:210px; height:auto; float:left; background-color:#FFFFFF; } /* 右側の設定*/ #right{ width:580px; height:950px; float:right; background-color:#FFFFFF; margin-bottom: 15px; } #sub_main { width: 550px; margin-left: 15px; background-color: #FFFFFF; margin-top: 10px; height: auto; margin-bottom: 5px; } #sub_main2 { width: 550px; margin-left: 15px; margin-top: 15px; background-color: #FFFFFF; height: auto; } #foot{ position:relative; width:100%; height:auto; background-color:#CCFFCC; clear:both; float: left; } ※sub_main1,2は●と○になります。どうかよろしくお願いいたします。
IE6のレイアウト崩れ

お世話になります。下記の内容でレイアウトをしております。 firefox3.08ではほぼ思い通りですが、 IE6では、menuがmainの左下に入り込んでしまい、 mainが真ん中より少し左にずれてしまうのです。解決策を教えてください。情報が足らないようでしたら、ご連絡下さい、宜しくお願い致します。 body { font-size : medium; } div#container { width : 730px; } div#header { font-size : 12px; width : 725px; } div#navi { width : 725px; clear : both; font-size : 12px; } .topicpath{ clear : both; width : 725px; margin : 3px 0 3px 0; } div#main{ float : right; width : 540px; } div#menu{ float : left; width : 170px; font-size : 12px; } div#footer { width : 725px; clear : both; font-size : 75%; } <div id="container"> <div id="header"> </div> <div id="navi"> </div> <div class="topicpath"> </div> <div id="main"> </div> <div id="menu"> </div> <div id="footer"> </div> </div>
IE8でサイドバーのレイアウトが崩れる場合の対処法

CSSについての質問です。 IE8よりも古いバージョンでのみレイアウトが崩れて困っています。簡単な抜粋ですが、以下のような感じでfloatを使ってレイアウトを作成しています。 [HTML] ---------------- <div id="main"> </div> <div id="sidebar"> </div> <div id="footer"> </div> ---------------- [CSS] ---------------- #main{ float:left; width:620px; } #sidebar{ float:right; width:300px; } #footer{ clear:both; } ---------------- IE8よりも古いバージョンでは、サイドバーが下に落ちてレイアウトが崩れてしまいます。しかもIEの開発ツールでHTMLを確認したところ、なぜかサイドバーがメインコンテンツの中に入っていました。 ---------------- <div id="main"> <div id="sidebar"> </div> </div> ---------------- なので、全体の幅を広げても、下に落ちてしまったサイドバーは全く上がってきてくれません。どうにか解決する方法はありませんでしょうか？文章だと伝わりくいかもしれませんが、よろしくお願いいたします。
ブログを３カラム右右から左右両サイドにしたい。

現在CSSは下記のようになっています。どこをいじれば右右から左右両サイドにできるのか教えていただけたら嬉しいです。宜しくお願い致します。 /** 03. Layout - レイアウトの設定 */ /* ----------------------------------------------- */ body { margin: 0; padding: 0; min-width: 960px; text-align: center; background-image: none; background-repeat: repeat; background-position: 50% top; } div#containerWrap { width: 960px; margin: 0 auto 5px; } div#container {} div#content { padding: 10px 0; border-width: 1px; border-style: solid; } div#main , div#sub , div#extra { overflow: hidden; } div#main { float: left; display: inline; width: 538px; } div#main div.column-inner { padding: 0 10px 10px; } div#sub { float: left; display: inline; width: 210px; } div#sub div.column-inner { padding: 5px 10px 0; overflow: hidden; border-width: 1px; border-style: none none none solid; } div#extra { float: left; display: inline; width: 210px; } div#extra div.column-inner { padding: 5px 10px 20px; overflow: hidden; border-width: 1px; border-style: none none none solid; }
3カラムのレイアウト、及びdivの入れ子等

初めまして。とても基本的なことでお恥ずかしいのですが、 3カラムのレイアウト、及びdivの入れ子等について、行き詰ってしまいました。どうぞ宜しくお願い致します。下記のように、3カラムの段組みレイアウトを行いました。左・右のナビゲーションに、width:150pxで幅指定し、それぞれleft・rightにfloat、中心部分（#contents）は、左右ナビゲーション分のマージンを設定して、真ん中に配置させる方法です。 HTMLでは、可変？させたい真ん中部分は、ナビゲーションの後に記述すること、とのことでしたので、そのように致しました。＜CSS＞ #contents { margin-left:155px; margin-right:155px; } #left { float:left; width:150px; } #right { float:right; width:150px; } ＜HTML＞ <div id="left>あああああああ</div> <div id="right">いいいいいいい</div> <div id="contents">ううううううう</div> ここまでは、問題なく配置させられたのですが、【#contents】の中に、<div>や<ul>などを使用すると、画像（http://blog.goo.ne.jp/ray-chimin）のような現象が起きます。ちなみに、【#left】のheightを長く伸ばすと、IEではキレイに並びましたが、firefox等では、やはり崩れます。と言いましても、それは実験的に行った結果で、【#left】のheightを無駄に長く伸ばすことは避けたいです…(;ω;) そもそも、【#contents】の中の、「中身の並べ方」の考え方に問題があるのでしょうか…？可能な限りシンプルに、正しいCSSの使い方でレイアウトしたいと考えております…！(>_<) divの不必要な多用？（ひとつひとつの画像をdivの中に入れたり、横並びのミニバナーを、divの中にdivを入れて…のような入れ子構造）は避けたいと思っておりましたが、もしかして、それがいちばん正しいのでしょうか…？ご存じの方、どうぞご指南の程宜しくお願い致します！散文、失礼いたしました！
float & clear

質問の概要は以下の通りです。 CSSを使用しています。可変長な画面を作成する際に、サイドバーを「float:left」で配置して「margin-left」でメイン画面を配置します。さらに、メイン画面の中で「float:left」と「margin-left」を使って左と右に分けます。このとき、メイン画面の中で、回り込みを防ぐために「clear:left」を使用します。ところが、この「clear:left」がサイドバーの長さに影響されてしまい、おかしな空白ができてしまいます。これを防ぐ方法はありますか？もしくは、全体的に構造がおかしいならば、ご指摘ください。すべてのソースをコピーするのは大変なので、主要な部分だけを以下に載せます。 <html> <head> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- body{ margin:0; } #header{ border:1px #000000 solid; } #side{ margin:10px; float:left; width:200px; border:1px #000000 solid; } #infomation{ margin:10px 10px 10px 230px; border:1px #000000 solid; } #main{ margin:10px 10px 10px 230px; border:1px #000000 solid; } #main-left{ float:left; margin:10px; width:250px; border:1px #000000 solid; } #main-right{ margin:10px 10px 10px 280px; border:1px #000000 solid; } #footer{ clear:left; border:1px #000000 solid; } .clear{ clear:left; } --!> </style> </head> <body> <div id="header"> title </div> <div id="side"> sidebar<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div id="infomation"> infomation </div> <div id="main"> main <div id="main-left"> main-left<br><br><br><br><br> </div> <div id="main-right"> main-right<br><br><br><br><br><br><br> </div> <div class="clear">clear</div> <div id="main-left"> main-left<br><br><br><br><br> </div> <div id="main-right"> main-right<br><br><br> </div> <div class="clear">clear</div> </div> <div id="footer">footer</div> </body> </html> 他にもいろいろ疑問点があり、「margin-left」ではなく「float:left」を２つ使用して左右の画面を表示した場合、通常は左右に分かれるのですが、右の画面の文章が長い場合に、右画面が左画面の下に移動してしまいます。これを現象を防ぐ方法はありませんか？全体の横幅を固定すればできるんでしょうが、可変長の場合にうまくいきません。
CSSによるリキッドレイアウトについて

Yahooの検索結果の画面は、左側がリキッドで右側のPR部分は固定幅になっています。どういうCSSなのか見てみたら、左側の検索結果リスト部分のdiv(id="yschres")には #yschres{ width:100%; width:expression((document.all('yschft') )?document.all('yschft').offsetWidth:'100%'); } /* IE: min-width */ と指定してありました。さて、サッパリわかりません。このCSSの意味をご教授いただきたいと思います。ちなみに、右側のPR部分のdiv(#yschec)には #yschec { width:220px; float:right; margin:0; padding:0;} というCSSが指定してありました。
段組みレイアウトがfloatleft上手くいきませ

先程の投稿は、一度削除させて頂きました。再度、投稿しなおします。なんとか、以下の画像のところまで持ってくることが出来ました。おかしなところ。 Q１ hedderの上に隙間１０ｐｘが出来てしまっている（本来は、黄色の色が一番上0pxの所まで持って行きたいです） Q2 全体が、centerに行かない、、、。左によってしまっております。以上２点です。宜しくお願いします。失礼致します。こんにちは。ycqと申します。 html+CSSでサイトを作っています。簡単に段組みレイアウトを作って、CSSで色を付けてみるのですが、レイアウトが崩れてしまっています。ソースを修正したりしたのですが、原因を見つけることが出来ませんでした。 heightは基本的に autoでも構いません。 #wrapper 950px #head 950px #main 950px (mainの中に) #main_left と#main_right があります。 #main_left 250px で左側メニューfloat:left; #main_right 700px で右側に回り込ませるために、きっちりと float:left; #main_right の中には #right_box_flash #contents #fotter が入ります。 |----------------------| |----|-----------------| | | | | |-----------------| | | | | |-----------------| |___|____________| 画像も添付させて頂きます。それぞれのボックスにたいして、CSSで色を付けております。おかしい所がございますでしょうか？ Q レイアウトがCenterを指定しているのに、真ん中にいかない。 Q #hedder の上部に１０ｐｘぐらいの空白ができている。margin:0px; padding:10px指定お時間がございましたら、どうぞ、宜しくお願いいたします。失礼致します。 index.html*************************** <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>hogehoge</title> <link href="css/default.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="wrapper"> <div class="header"> <h2>header</h2> </div> <div class="main"> <div class="main_left"> </div> <div class="left_box_menu"> 　 <h2>left_box_menu</h2> </div> </div> <div class="main_right"> <div class="right_box_flash"> <h2>right_box_flash</h2> </div> <div class="contents"> <h2>contents</h2> </div> <div class="footer"> <h2>footer</h2> </div> </div> </div> </div> </div> </body> </html> **************************************** default.css*********************************** @charset "utf-8"; /* CSS Document */ /*------------------------------*/ 共通設定 /*------------------------------*/ * { margin: 0; padding: 0; line-height: 1.6; font-family: "メイリオ","ＭＳＰゴシック", "ヒラギノ角ゴ Pro W3"; list-style-type: none; } img{ border:none; } body{ margin: 0; padding: 0; text-align:center; background-color:red; } /*------------------------------*/ 大枠ボックス構成 /*------------------------------*/ .wrapper{ width:950px; height:1015; margin:0px auto; padding:0px;background-color:orange; } .header{ width:950px; height:100px; background-color:yellow; } .main{ width:950px; background-color:purple; } .main_left { width:250px; height:915px; margin:0px auto; padding:0px; float:left; background-color:DarkgGldenRod; } .left_box_menu{ width:250px; height:auto; float:left; background-color:khaki; margin:0px auto; padding:0px; } .main_right{ width:700px; height:auto; float:left; } .right_box_flash{ width:700px; height:300px; float:left; background-color:pink; } .contents{ width:700px; height:280px; float:left; background-color:blue; } .footer{ width:700px; height:115px; float:left; background-color:yellow;
IE6のみレイアウトがずれる。

IE6のみレイアウトがずれる。 CSSで下記のように指定しています。現状のブラウザであればレイアウトが崩れないのですが IE6で見るとレイアウトが崩れるのです。 #my_navi　#my_contentsL #my_contentsR の三つが横一列に並ばせたいのですが ●　　　　　←#my_navi 　●　　　　←#my_contentsL 　　●　　　←#my_contentsR の様にレイアウトが崩れてしまいます。何か解決方法が有りますでしょうか? 宜しくお願い致します。 ↓CSSの記述 body { width : 100% ; float: center; display: inline; } #my_body { margin: 0 auto; width : 950px ; } #my_main { width : 950px ; } #my_header { width : 950px ; height: 100%; } #my_headerT { float : left ; width : 950px ; } #my_headerL { float : left ; width : 750px ; height: 260px; } #my_headerR { float : right ; width : 200px ; height: 260px; } #my_navi { float : left ; width : 190px ; display: inline; } #my_contents { float : right ; width : 750px ; display: inline; } #my_contentsL { float : left ; width : 550px ; display: inline; } #my_contentsR { float : left ; width : 190px ; display: inline; } #my_contentsF { float : left ; width : 750px ; display: inline; }
floatを使用したレイアウトでbody全体を中央寄せするには？

floatを使用したレイアウト(下記)で、body全体の中央寄せを実現するには、CSSでどのように記述すれば良いのでしょうか？ <body> <div> <div id="left"></div> <div id="center"></div> <div id="right"></div> </div> </body> DIV#left　 { width: 10px;float:left;background:red;} DIV#center { width:300px;float:left;background:green;} DIV#right　{ width: 10px;float:left;background:blue;}
レイアウトが崩れます

汚いソースで失礼します。メニューとコンテンツとサブメニューがありますがこの３つの高さを保つにはどうしたらいんでしょうか？コンテンツ部分の高さが長いと　メニューとサブメニューの高さは短いままで　ダサい感じなんです。　なんとご説明したらいいのやら（汗コンテンツ部分が長くてもメニューとサブメニューの高さを自動に設定させるようにするには、どうしたら良いのでしょうか？ご教授願います HTMLのソース＋CSSです↓ <html> <body> <div class="wrapper"> <div class="header"> ヘッダーになります<br> </div> <div class="main"> <div class="menu"> menu<br> menu<br> menu<br> menu<br> menu<br> menu<br> </div> <div class="contents"> コンテンツになります<br> コンテンツになります<br> コンテンツになります<br> コンテンツになります<br> </div> <div class="submenu"> サブメニューはこちらです<br> サブメニューはこちらです<br> </div> </div> <div class="footer"> フッター<br> </div> </div> </body> </html> CSS .wrapper { width: 900px; margin: 0 auto; line-height: 1.5; } /* メイン*/ .main { width: 900px; } /* ヘッダ*/ .header { width: 900px; height: 200px; background-color: #66FFFF; background:url(img/top2.jpg) ; } /* Menu*/ .menu { width: 150px; float: left; background-color: #FFFF99; } /*コンテンツの設定*/ .contents { float: left; width: 600px; background-color: white; } /*SubMenuの設定*/ .submenu { float: left; width: 150px; height: 300px background-color: #66FF66; } /* 下の設定 */ .footer { clear: both; width: 900px; border-top: 1px dotted gray; height: 20px; text-align: center; font-size:0.7em; background-color:black; }
【CSS】IE6で印刷時にレイアウトが崩れる

大変困っています。印刷を前提に作ったページではないのですが、クライアントから印刷時にレイアウトが崩れて印刷できないとご指摘を受けました。そこで、IE6とFirefoxで確認したところ、 Firefoxではレイアウトが崩れずきちんと印刷されますが、 IE6では2カラムの右側（メイン部分）が消えてしまっています。（IE7は自分のオフィスでは入れてはいけないことになっているので、IE7では確認していません。）何か問題があれば、ご指摘お願い致します。 <div id="container" class="clearfix"> <div id="siteSub"> ああああああ </div> <div id="siteMain"> いいいいいい </div> </div> ■CSS-------------------------------- div#container{ width: 950px; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 10px; } div#siteSub{ margin: 0px; padding: 0px; width: 230px; display: block; float: left; } div#siteMain{ padding: 0px; float: left; width: 710px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 10px; } 右側のメイン部分が消えてしまっているので、大雑把にレイアウト部分だけ書いてみました。 siteMainの中身のCSSのfoat要素等が関わってくることはあるのでしょうか。 linkの部分は media="all"としています。 <link rel="stylesheet" type="text/css" href="css/import.css" media="all"> また、Yahoo! UI Libraryを参考にした、reset.cssも入れています。
スタイルシートで背景を伸ばしたい

以下のソースで、文字列のside side...の高さをmain,main...に揃えたいです。色々試してみたのですが、side の文字のある側の背景が下まで伸びてくれません。どうしたらよいでしょうか。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style TYPE="text/css">  </style> </head> <body> <div id="container"> <div id="main"> main<br> main<br> main<br> main<br> main<br> </div> <div id="side"> side<br> side<br> side<br> </div> </div> </body> </html>

リキッドレイアウトについて

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

関連するQ&A

スタイルシートでのレイアウトについて

リキッドレイアウトでどうしてもわからないこと

<div>タグでサイドバーを作るときの幅の指定方法

CSSレイアウト(2列型)に関して

レイアウトがズレル

3カラムレイアウトで隙間

【HP制作】２カラムを3カラムに変更したい！

CSSでブラウザごとにレイアウトが崩れたりします。

IE6のレイアウト崩れ

IE8でサイドバーのレイアウトが崩れる場合の対処法

ブログを３カラム右右から左右両サイドにしたい。

3カラムのレイアウト、及びdivの入れ子等

float & clear

CSSによるリキッドレイアウトについて

段組みレイアウトがfloatleft上手くいきませ

IE6のみレイアウトがずれる。

floatを使用したレイアウトでbody全体を中央寄せするには？

レイアウトが崩れます

【CSS】IE6で印刷時にレイアウトが崩れる

スタイルシートで背景を伸ばしたい

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

リキッドレイアウトについて

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

関連するQ&A

スタイルシートでのレイアウトについて

リキッドレイアウトでどうしてもわからないこと

<div>タグでサイドバーを作るときの幅の指定方法

CSSレイアウト(2列型)に関して

レイアウトがズレル

3カラムレイアウトで隙間

【HP制作】２カラムを3カラムに変更したい！

CSSでブラウザごとにレイアウトが崩れたりします。

IE6のレイアウト崩れ

IE8でサイドバーのレイアウトが崩れる場合の対処法

ブログを３カラム右右から左右両サイドにしたい。

3カラムのレイアウト、及びdivの入れ子等

float & clear

CSSによるリキッドレイアウトについて

段組みレイアウトがfloatleft上手くいきませ

IE6のみレイアウトがずれる。

floatを使用したレイアウトでbody全体を中央寄せするには？

レイアウトが崩れます

【CSS】IE6で印刷時にレイアウトが崩れる

スタイルシートで背景を伸ばしたい

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

カテゴリ
一覧

専門家に質問してみよう
専門家登録