※ ChatGPTを利用し、要約された質問です(原文:XHTML+CSSによるデザインをしています。)
XHTML+CSSによるデザインで3段組レイアウトが崩れる問題の解決方法
このQ&Aのポイント
XHTML+CSSによるデザインで3段組レイアウトが崩れる問題の解決方法をご紹介します。
divボックスによる3段組レイアウトをする際に、2個目のボックスが表示されずメインボックスと右サイドバーが詰まってしまうという問題が発生しました。
この問題は、コーディングミスが原因であり、正しいコーディングを行うことで解決できます。
XHTML+CSSによるデザインをしています。
divボックスによる3段組レイアウトをして、左サイドバーの中にdivボックスを、縦に複数設置しようとしたら、2個目のボックスが表示されずメインボックスと右サイドバーが詰まってレイアウトが崩れてしまいました。
コーディングミスをご指摘いただけるのでしたらお願いします。
<div id="wrap">
<div id="header">
<div id="header_top">
<div id="logo">
<img src="image/logo.jpg" alt="" />
</div><!-- /logo -->
<div id="header_right">
<div id="logo2">
Lost Book World
</div>
<div id="header_right_txt">
Yu
</div>
</div><!-- /header_right -->
</div><!-- /header_top -->
<div id="header_bottom">
<a href=".html"><img src="image/navi_global01.jpg" alt="" /></a><a href=".html"><img src="image/navi_global02.jpg" alt="" /></a><a href=".html"><img src="image/navi_global03.jpg" alt="" /></a><a href=".html"><img src="image/navi_globa4.jpg" alt=" /></a><a href=".html"><img src="image/navi_global05.jpg" alt="" /></a>
</div><!-- /header_bottom -->
</div><!-- /header -->
<div id="inner">
<div id="largeWrap">
<div id="mainWrap">
</div><!-- /mainWrap -->
<div class="sideAlphaWrap">
<div id="form_nv">
<img src="image/form-n.jpg" alt="" /><a href=""><img src="image/form-gen.jpg" alt="" /></a>
</div>
<div id="form">
</form>
</div>
<div id="form_bottom">
<img src="image/kakumaru-bottom.jpg" alt="" />
</div>
<br />
<div id="form_nv">
<div id="form">
ああああ
</div>
<div id="form_bottom">
<img src="image/kakumaru-bottom.jpg" alt="" />
</div>
</div><!-- /sideAlphaWrap -->
<div class="clear"><hr /></div>
</div><!-- /largeWrap -->
<div class="sideBetaWrap">
右サイドバー
</div><!-- /sideBetaWrap -->
<div class="clear"><hr /></div>
</div><!-- /inner -->
<div class="footer">
<p>ヘッダー<br />
Copyright © 2004-2010 abc co.,Ltd., All rights reserved.</p>
</div><!-- /footer -->
</div><!-- /wrap -->