今更感が否めない内容ですが、ふとこの状況になった際、不覚にもてこずってしまったので・・・
<div id="main_box"> <div id="box_left"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <div id="box_right"> <dl> <dt>1</dt> <dd>2</dd> </dl> </div> </div>
#main_box { margin:10px; width:220px; background:#000; color:#FFFFFF; font-size:16px; font-weight:bold; text-align:center; } #box_left { width:100px; float:left; background:#FF0000; } #box_right { width:100px; float:right; background:#0000FF; }
<div id="main_box"> <div id="box_other"> 割りこんでやんよ </div> <div id="box_left"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <div id="box_right"> <dl> <dt>1</dt> <dd>2</dd> </dl> </div> </div>
#main_box { padding:10px; margin:50px; width:220px; background:#000; color:#FFFFFF; font-size:16px; font-weight:bold; text-align:center; position:relative; overflow:auto; } #box_left { width:100px; float:left; background:#FF0000; } #box_right { width:100px; float:right; background:#0000FF; } #main_box #box_other { width:50px; height:50px; background:#FF00FF; position:absolute; top:-20px; left:100px; }