Дизайн с использованием поплавка: справа и слева. Случай использования

Question

Я хотел бы получить ваши советы по поводу дизайна заголовка моей веб-страницы.

Общая структура его конструкции показана ниже:

Его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, в моем случае более или менее 1200px).Как я могу достичь этого эффекта?Обратите внимание, что мне нужно .logo1, чтобы быть оправданным для левой руки и .logo2, чтобы быть оправданным для правой руки.

Спасибо.

Answer 1

Вы можете использовать абсолютное позиционирование:

http://jsfiddle.net/LuRDk/

.header{
    position:relative;
    height:84px;
    padding:20px;
    border:1px solid green;
}

.logo{
    position:absolute;
    width:80px;
    height: 80px;
    border:1px solid red;
}

.right{right:20px;}
.left{left:20px;}

<div class="header">
    <div class="logo left"></div>
    <div class="logo right"></div>
</div>

Answer 2

Зачем использовать поплавок?Вы на полпути к использованию позиционирования CSS с этим position:absolute;!http://jsfiddle.net/6sFY5/1/

Answer 3

Попробуйте это,

<div class="header">
   <div class="logo1"></div>
   <div class="logo2"></div>
   <div style="clear:both"></div>
</div>

Answer 4

Добавить отрицательное поле к logo1, например:

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

Это будет означать, что окно может стать как можно более узким, и logo2 никогда не будет опускаться.

Отредактировано, поскольку при первой попытке логотип 2 по-прежнему будет падать на ширину менее 655 пикселей.

Редактировать 2: Вы также можете установить z-индекс на .logo2, чтобы он охватывал логотип1, если вы этого хотите.