- 締切済み
DIVの入り子のwidthの指定方法
DIVの入り子のwidthの指定方法がうまくいきません。 ＜ｃｓｓ＞ #main { width: 770px; margin: auto; padding: 0px; text-align: left; background-color: #cc0000; } .box_main{ width: 750px; background-color: #FFFFFF; margin: 0px 10px 10px 10px; padding: 0px; border: 0px; } .box_1{ margin: 5px 2px 5px 5px; padding: 0px; border: 0px; height: 299px; width: 236px; background: url(img/test2.jpg); float: left; } .box_2{ margin: 5px 5px 5px 0px; border: 0px; height: 295px; width: 491px; background-color: #33ff00; float: left; } .cl { clear: both; } この際、.box_mainの中にbox_1、box_2を横ならびにおきたいのですが うまくいきません。box_2のWIDTHの幅の指定がおかししのでしょうか？ HTMLは<html> <body> <div id="main"> <div class="box_main"> <div class="box_corner">あああああ</div> <div class="box_1"></div> <div class=box_2></div> <div class="cl"> </div> </div> </body> </html> です。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 4つ書いた場合、marginは margin:上 右 下 左 になります ですので (5px:box1 left-margin)(236px:box1 width)(2px:box1 right-margin)(0px:box2 left-margin)(??px box2 width)(5px:box2 right-margin) になります したがって 750-5-236-2-0-5=502px となります しかしながらFirefox,Operaでは502pxでできるのですがIEでは『floatさせると左端のmarginが倍になる』というバグがあるのでbox1 left-marginの5pxが2倍の10pxになり497pxになります IEでも502pxでできるようにするには .box1にdisplay:inline;を付け加えるか marginではなくpaddingを使用するようになります
- leap_day
- ベストアンサー率60% (338/561)
こんにちは ちょこちょこっとしたミスはあると思いますが11px余ると思いますので計算はあっています 試してみましたがちゃんと表示されているようなのですが？（IE6,Firefox2,Opera9) width: 750px; background-color: #FFFFFF; → 全角スペースは使用できません（Tabか半角スペース） margin: 0px 10px 10px 10px; → margin: 0px 10px; 下側に余分な背景色が出る（IEのみ） 余白を空けるなら#box_mainの下側paddingを指定するか.clでmargin調整してください background: url(img/test2.jpg); → background-image: url(img/test2.jpg); 背景画像指定のときはbackground-image:url();の方がいいかも？（どっちでもできますけど） 記述漏れ <div class=box_2></div> → <div class="box_2"></div> → </div>が1つ足りない
補足
こんにちは！ ご回答ありがとうございます！ 実はbox_2のwidthの計算方法がうまくわからなくて （width: 491px;としたのはたまたまなんです・・・・。） box_1の方を優先したいんですが、この場合、 box_2の幅を指定する時、 750ＰＸ-（5px+5px;box1のマージン）-236px（box1の幅）-（5px+5px;box2のマージン）＝494px かな、と思ったんですがはみ出してしまったりして上手く表示できなくて・・・・。 もしよかったら正しい計算方法を教えて頂いてもいいでしょうか？
- OKbokuzyo
- ベストアンサー率43% (130/296)
divはブロックレベル要素です。 「インライン html」や「ブロック html」なんかでググってみてください。 解説をしているっぽいサイトがあったので参考までに載せておきます。 http://www.mozilla.gr.jp/standards/webtips0015.html
お礼
ご丁寧な回答ありがとうございます！ ＞IEでは『floatさせると左端のmarginが倍になる』というバグ このバグ知らなかったです！ なるほど、すごく勉強になりました。 ありがとうございます！