css布局问题

框架
HTML code

<div class="warp">
   <div class="up-l left">上左</div>
   <div class="up-r right">上右</div>  
</div>

<div class="warp">
   <div class="down-l left">下左</div>
   <div class="down-r right">下右</div>  
</div>

相关css
CSS code

.warp{
    width:1002px;
    margin:auto;

}

.left{
    width:702px;
    float:left;
}

.right{
    width:295px;
    float:right;
}

.down-l{
    clear:left;
}
.down-r{
    clear:right;
}

想要实现的效果：
本来想上传的，但是图片地址太长了，不给发。
上传图片的功能真的很让人蛋疼，帖子还不能预览。
说明：
弄了很久还是搞不定在IE6、7里面如何达到这种效果，老是会有大片的空白出现，那是因为上右的内容比上左的内容多，撑开整个div块,我想的是下左可以填补上左空出来的区域，下右紧跟在上右的下面，从而形成一个错位排列。现在我的代码在IE8和FF可以实现，但是在IE6 7都不可以，想求教高人，此种效果兼容IE6和7的代码，望不吝赐教，呵呵。

table算了。。。

分两大列并排。
里面的随意。