html - 使用float进行设计:左右。使用案例

我想听听你对我网页标题设计的建议。
其设计总体结构如下：
它的HTML部分：

<div class="header">
   <div class="logo1"></div>
   <div class="logo2"></div>
</div>

它的CSS部分：

.header{
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 160px;
   border: 1px solid #48ace1;
}

.logo1{
   float: left;
   width: 655px;
   height: 160px;
   background: url(images/logo1.png) no-repeat 0px 2px;
}

.logo2{
   float: right;
   width: 465px;
   height: 160px;
   background: url(images/logo2.png) no-repeat 0px 2px;
   position: relative; /* it is set to relative because inside this layer I have
                          several elements with absolute position.*/
}

问题是：
当我在宽屏电脑中打开此网页时，它会完全打开，没有任何问题，但当我在宽屏电脑中打开网页时，第二个徽标（.logo2）会降到下一行，如下图所示：
这是因为.logo1和.logo2的总宽度是655px+465px=1120px。因此，一旦浏览器的宽度或多或少小于1200像素，第二个徽标（.logo2）就无法在.header中找到位置，它会自动降到下一行。
在这种情况下，我希望.logo2重叠.logo1如果浏览器的宽度小于两个徽标的总宽度（.logo1和.logo2，在我的情况下大约是1200像素）。我怎样才能达到这种效果？注意，我需要将.logo1左对齐，将.logo2右对齐。
谢谢您。

最佳答案

为什么使用float？你已经使用CSS定位了一半！http://jsfiddle.net/6sFY5/1/