floatを使って複雑にボックスを配置し、その一番下にborderで囲った文章を配置したいのですが、 Coment4で設定したborderと文章が、borderはPhot1のすぐ下に表示され、 文章はphot4の下から表示されてしまいます。 phot1と同じ左隅からborderで囲まれた文章を配置するにはどうしたらいいのでしょうか？ <style type="text/css"> #phot1{ width: 750px; height: 50px; /*ここからはgoo質問用(実際は入れない)*/ background-color: #48637e; color: #fff; } #left{ float: left; width: 450px; margin: 10px; /*↓goo質問用*/ border: 1px solid #39f; } #Coment1{ font-size: 16px; color: #fff; line-height: 110%; /*↓goo質問用*/ width: 400px; height: 60px; background-color: #8493bb ; } #Coment2{ font-size: 12px; color: #000; /*↓goo質問用*/ width: 300px; height: 60px; background-color: #777; } #phot2{ padding-left: 60px; background: url("sample.jpg") 0 0 no-repeat; float: left; margin: 0;/*バグ？余白を削除*/ /*↓goo質問用*/ background-color: #ff0; width: 140px; } #phot3{ float: left; overflow: hidden; /*↓goo質問用*/ border: 1px solid #e37615 ; width: 200px; } #right{ float: left; width: 270px; margin-top: 10px; overflow: hidden; /*↓goo質問用*/ border: 1px solid #7c4b15; } #Coment3{ float: left; font-size: 12px; width: 180px; /*↓goo質問用*/ border: 1px solid #000; height: 140px; } #phot4{ float: left; overflow: hidden; margin: 5px; width: 70px; /*↓goo質問用*/ border: 1px solid #ff3cb9; } #phot4 ul{ display: inline; text-align: center; line-height: 18px; } #Coment4{ /*ここからはgoo質問用(実際は入れない)*/ border: 10px solid #f00; width: 750px; height: 50px; } </style> ---------------------- <div id="phot1">画像1</div> <div id="kono_div_hituyoukana"> <div id="left"> <div id="Coment1">coment1coment1coment1</div> <div id="Coment2">coment2coment2</div> <div id="phot2">横50px背景画像</div> <div id="phot3">画像3</div> </div> <div id="right"> <div id="Coment3">coment3coment3coment3coment<wbr /> 　3coment3coment3coment3comen<wbr /> 　t3coment3coment3</div> <div id="phot4"><ul><li><img src="sample.jpg" width="65" height="80">画像4</li></ul></div> </div></div> <div id="Coment4">Coment4Coment4</div>