css问题：两个DIV中设置背景图片宽度

[zabcd117]

先说要实现的效果：
IE6下
两个DIV并排显示，左边宽度固定，右边自适应
都是设置背景图片，左边的固定，右边的拉伸
但是只要一设置高度，两个DIV就会出现空隙
FF下正常的


代码比较简单
css
.top1
{
background:url("../images/top1.jpg");
width:1000px;
height:54px;
float:left;
}

.top2
{
background:url("../images/top2.jpg") repeat-x;
height:54px;
margin-left:1000px;
}
.clear
{
clear:both;
}
<div class="top1"></div>
<div class="top2"></div>
<div class="clear"></div>
这样的问题就是一旦我设置了top1和top2的高度，在IE里面就出现了一个空白间隔，FF是正常的
后来我改成这样

.top1
{
background:url("../images/top1.jpg");
width:1000px;
line-height:54px;
float:left;
}

.top2
{
background:url("../images/top2.jpg") repeat-x;
line-height:54px;
margin-left:1000px;
}
.clear
{
clear:both;
}
<div class="top1"> </div>
<div class="top2"> </div>
<div class="clear"></div>

问题倒是解决了，但是我不明白原因。
问问大伙有木有好的解决方案.....

[sjmlsxp]

比较汗

2栏最简单的是这样的
<style type="text/css">
.top1{
background-color:#339999;
width:100px;
height:54px;
float:left;
}

.top2{
background-color:#006699;
height:54px;
float:left;
}
</style>
<div class="top1"></div>
<div class="top2">内容增加而增加宽度，到各个浏览器的默认值后会换行</div>

[zabcd117]

我明白
你设置一下背景图片再看看，背景图片和文字不一样的

[sjmlsxp]

背景又不是内容

当然不一样

背景是不会撑开DIV的
只有内容才能撑开

[zabcd117]

我现在就是图片啊，但是我设置DIV的高度和背景图片的高度一致后，空隙就出来了...

[sjmlsxp]

什么意思？

代码都贴出来看看

[zabcd117]

IE6下
两个DIV并排显示，左边宽度固定，右边自适应
都是设置背景图片，左边的固定，右边的拉伸
但是只要一设置高度，两个DIV就会出现空隙
FF下正常的

代码如我最开始贴的