- ベストアンサー
CSSで横の段組-センタリングするには？
qqw55fs9k2の回答
初めまして。独学なので正確なスタイルシートの記述かどうか分かり ませんが、私は普段こうしてセンタリングと横の段組をしています。 全体の枠となるボックスをセンターに配置して、その中に各ボック スを左寄せで順々に並べていくというものです。 HTMLの記述は以下のようにしています。 <div class="box"> <div class="box_left">ここに内容</div> <div class="box_right">ここに内容</div> </div> 外部スタイルシートの記述は以下のようにしています。 box { text-align:left; width:700px; height:700px; padding:0px; margin:0px auto 0px auto; } box_left { float:left; text-align:left; width:300px; height:700px; padding:0px; margin:0px; } box_right { float:left; text-align:left; width:400px; height:700px; padding:0px; margin:0px; } 良かったら試してみてください。
関連するQ&A
- CSSでのセンタリングができません。
CSSでのセンタリングができません。 こちらのページを参考にCSSで下記のようにCSSを設定したのですが センタリングされません。設定方法がまずいのでしょうか? それともWEB上で確認せずローカルで確認していることに問題があるのでしょうか? 宜しくお願い致します。 (CSSの記述はヘッダーに入れておりHTMLはBODYに記述しております) http://desperadoes.biz/style/dan/ +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ * { margin : 0 ; padding : 0 ; } body { width : 100% ; float: center; } #my_body { position : relative ; margin-left:auto ; margin-right:auto; } #my_main { width : 950px ; } #my_header { width : 950px ; } #my_navigation { float : left ; width : 190px ; } #my_contents { float : left ; width : 750px ; } #my_contentsM { float : left ; width : 550px ; } #my_contentsS { float : right ; width : 190px ; } #my_contentsB { float : left ; width : 750px ; } HTML部分は <body> <div id="my_body"> <div id="my_header"> </div> <div id="my_main"> <div id="my_navigation"> </div> <div id="my_contents"> <div id="my_contentsM"> </div> <div id="my_contentsS"> </div> <div id="my_contentsB"> </div> </div> </div> </div> </body>
- ベストアンサー
- ブログ
- CSS：floatを使っての段組で困っています
図のような段組をしたいのですが、ソースはあっているでしょうか？ サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }
- ベストアンサー
- HTML
- CSSで全体をセンタリングしたい
navi address main footer ↑このような4つの<div>をさらにcoverという<div>でくるんだ？レイアウトにしました。 下記のようなCSSにしたのですが、中央にすることができません。 同じような質問もたくさんあり、拝見したのですがどうもうまくいきません。 coverという<div>を作ったのが間違いなのでしょうか？ ------------------------------------------- body{ text-align:center; } #cover{ width: 800px; margin-right=:auto; margin-left=:auto; text-align:left; } #navi{ float: left; width: 565px; height: 165px; } #address{ float: right; text-align: left; width: 235px; } #main{ width: 500px; clear:both; padding-right: 150px; padding-left: 150px; font-size: 10px; text-align: left; line-height: 20px; } #footer{ width: 500px; text-align:center; padding-right: 150px; padding-left: 150px; padding-top: 30px; } -------------------------------------------
- ベストアンサー
- CSS
- CSSでバックグラウントカラーの途切れを直したい
CSS初心者です。 CSSでfloatを利用してプロックを左右に並べています。 その際、左のブロックにbackground-colorを指定していますが、右のブロックの情報が多かった場合に、background-colorが途中で終わってしまいます。 どのようにしたらよいでしょうか。 下記のCSSもおかいしところがあるかも・・・指摘をお願いします。 #page { width: 750px; margin-right: auto; margin-left: auto; text-align: left; border: 1px solid #666666; margin-bottom: 0px; } div.blocka{ float: left; background-color: #FFC556; width: 150px; margin:0px 0px 0px 0px; padding:5px ; border-right:1px solid #666666 ; } div.blockb { float: left; margin:0px 0px 0px 0px; padding:10px ; width: 550px; }
- ベストアンサー
- HTML
- 左右段組で、左側を数値固定、段組間に20pxの空き。このCSS記述について
こんにちは。 左右段組をCSSの「float」でやろうとしています。 左をdivでくくりclassを「column01」 右をdivでくくりclassを「column02」とし 左側は横幅180px固定です。 両者の間に20pxの空きを入れたいと思います。 以下のようにCSS指定をしました。 .column01 {width : 180px; float : left;} .column02 {margin-left : 200px;} 質問(1) この記述は正解でしょうか？ いろいろなサイトで調べても column02を指定なしにする解説がほとんどで 正しいのかどうかがよく分かりません 質問(2) 上の記述で、多くのブラウザでは 希望通り表示してくれますが 「Netscape4.73」ではcolumn01と02の間が 200pxどかんと開いてしまいます。 これは「Netscape4.73」のバグなのでしょうか？ それとも(1)の記述自体が間違っているのでしょうか？
- ベストアンサー
- HTML
- CSSについて
こんにちは。 現在、CSSを使用して、Webページを作成しております。 先日、ページの幅を、750pxにし、センタリングしたのですが、 長い文章を入力すると、改行がされず、横スクロールになってしまいます。 CSSは、こちらです。↓ #hogehoge { margin:0 auto; width:750px; } 最後にmargin-left:auto; margin-right:auto;をつけてみたのですが、やはり駄目です。 HTMLは、こちらです。 <html> | |（途中略） <div id="hogehoge"> 長い文章～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ </div> </body> </html> どなたか横スクロールをせずに、幅の限界まで来たときに自動改行されるようなCSSを教えていただければ幸いです。 ご面倒だとは思いますが、お願いします。
- ベストアンサー
- CSS
- CSSレイアウトの本当の正しいやり方
CSSでヘッダーとフッター付きの2カラムレイアウトを書籍のサンプルを見て行ないました。 表示は何も問題ないのですが、色々とサンプルレイアウトのサイトを見ていると「main」でleft-marginfを指定しているのはなく、floatを指定しているのが多いのですが、下記でも合っているのでしょうか。 #wrap { width: 700px; margin: 0 auto; text-align: left; } #header { color: #fff; } #menu { width: 160px; float: left; } #main { margin-left: 160px; padding: 10px; } #footer { clear: both; padding: 10px; }
- ベストアンサー
- HTML
- CSSのセンタリングが、「div」で何故か出来ない
下記のアドレスのホームページについてです。 http://sky.geocities.jp/thanksv0358/index.html# HTMLで、 <body> <div id="main"> ～ </div> </body> とし、CSSで #main{ text-align:center; margin-left:auto; margin-right:auto; text-align:left; } としたにもかかわらず、何故かセンタリングができません。 今回、最初の<!DOCTYPE～の部分から全部、自分で書いてみました。 詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- CSSでボックスを中央に表示させたい
CSSでボックスを中央に表示させたいのですが、 {float:left; width: 800px; heght: 100px; height: 100px; margin: auto; text-align:left;} こんな感じでできるかと思ったのですができません。 既存の質問にもあったように margin: auto; text-align:left; と入れたのですが、左寄せのままでした。
- ベストアンサー
- CSS
- ページ全体をセンタリングできません
フルCSSでWEB作成をしていますが、ページ全体をセンタリングしたいのですが、IEで見ると右にずれてしまいます。ネットでいろいろ検索をして試してみたのですが、うまく行きません。 HTMLは <div id="centering"> <div id="wrapper"> </div> </div> で、CSSは #centering { text-align: center; width: 100%; position: absolute; margin: 0px; padding: 0px; } #wrapper { width: 900px; margin: 0px auto 0px auto; padding: 0px; text-align: left; です。 これではだめなんでしょうか。
- ベストアンサー
- CSS
お礼
ご回答ありがとうございます。 なるほどできました！ 入れ子にするわけですよね？ありがとうございます。