如何防止元素在div中的包裝？

Question

我有一個包含三個部分（div）的標題。當我調整瀏覽器窗口的大小時，標題元素正在打包。屏幕截圖和代碼的外​​觀如下：

1）HTML：

<div class="container"> 
    <div class="header"> 
     <div class="header-left-part"> 
      <div class="header-title-left-part"> 
       <a href="http://www.nestro.ru/ru/" target="_blank"><img src="../../Images/Zarubezneft.png" /></a> 
       &nbsp;&nbsp;&nbsp;&nbsp;<img src="../../Images/50years.png" /> 
      </div> 
     </div> 
     <div class="header-middle-part"></div> 
     <div class="header-right-part"> 
      <div class="header-title-right-part-login"> 
       <a href="http://www.rvpetro.ru/" target="_blank"> 
        <img src="../../Images/Rusvetpetro.png" /> 
       </a> 
      </div> 
     </div> 
    </div> 

2）CSS：

html, body { 
    margin: 0; 
    padding: 0; 
    min-width: 1200px; 
    width: auto !important; 
} 

... 

.container { 
    position: relative; 
} 

.header 
{ 
    position: absolute; 
    height: 40px; 
    width: 100%; 
    z-index: 110; 
    white-space: nowrap; 
} 

.header-left-part 
{ 
    position: absolute; 
    height: 40px; 
    width: 25%; 
    background: #eaaa00; /* For browsers that do not support gradients */  
    background: -webkit-linear-gradient(left, #fef9e7, #ffdb8b); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(right, #fef9e7, #ffdb8b); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(right, #fef9e7, #ffdb8b); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(to right, #fef9e7, #ffdb8b); /* Standard syntax (must be last) */ 
    white-space: normal; 
} 

.header-middle-part 
{ 
    position: absolute; 
    height: 40px; 
    left: 25%; 
    width: 50%; 
    background: #eaaa00; /* For browsers that do not support gradients */  
    background: -webkit-linear-gradient(left, #ffdb8b, #b2a000); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(right, #ffdb8b, #b2a000); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(right, #ffdb8b, #b2a000); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(to right, #ffdb8b, #b2a000); /* Standard syntax (must be last) */ 
    text-align: center; 
    font-size: 18px; 
    font-weight: bold; 
    white-space: normal; 
} 

.header-right-part 
{ 
    position: absolute; 
    height: 40px; 
    left: 75%; 
    width: 25%; 
    background: #EAAA00; /* For browsers that do not support gradients */  
    background: -webkit-linear-gradient(left, #b2a000, #138d75); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(right, #b2a000, #138d75); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(right, #b2a000, #138d75); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(to right, #b2a000, #138d75); /* Standard syntax (must be last) */ 
    color: white; 
    white-space: normal; 
} 

.header-title-left-part 
{ 
    float: left; 
    margin-left: 15px; 
    margin-top: 2px; 
    font-size: 18px; 
    font-weight: bold; 
} 

.header-title-middle-part-text 
{ 
    float: left; 
    width: 100%; 
    height: 40px; 
    margin-top: 8px; 
    font-size: 18px; 
    font-weight: bold; 
    text-align: center; 
} 

.header-title-right-part-login 
{ 
    float: right; 
    margin-right: 3px; 
    margin-top: 0px; 
} 

.title-right-main 
{ 
    float: right; 
    margin-right: 3px; 
    margin-top: 1px; 
} 

.title-right-main-icons 
{ 
    float: right; 
    margin-right: 3px; 
    margin-top: 12px; 
} 

如何解決呢？

Answer 1

只在頭類看到這個圖像使用梯度

check image

<div class="container"> 
<div class="header"> 
    <div class="header-left-part"> 
     <div class="header-title-left-part"> 
      <a href="http://www.nestro.ru/ru/" target="_blank"><img src="image-1.jpg" /></a> 
      <img src="50-logo.jpg" /> 
     </div> 
    </div> 
    <div class="header-middle-part">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> 
    <div class="header-right-part"> 
     <div class="header-title-right-part-login"> 
      <a href="http://www.rvpetro.ru/" target="_blank"> 
       <img src="image-2.jpg" /> 
      </a> 
     </div> 
    </div> 
</div> 

不能使用絕對一起頭和他的孩子的像「頭，左部分「，」標題中間部分「，」標題右部分「僅設計絕對父母和他的孩子的靜態

html, body { 
    margin: 0; 
    padding: 0; 
    min-width: 1200px; 
    width: auto !important; 
} 

... 

.container { 
    position: relative; 
} 

.header 
{ 
    position: absolute; 
    height: 60px; 
    width: 100%; 
    z-index: 110; 
    left:0; 
    top:0; 
    white-space: nowrap; 
    background: #eaaa00; /* For browsers that do not support gradients */  
    background: -webkit-linear-gradient(left, #ffdb8b, #b2a000); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(right, #ffdb8b, #b2a000); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(right, #ffdb8b, #b2a000); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(to right, #ffdb8b, #b2a000); /* Standard syntax (must be last) */ 
} 
.header-left-part 
{ 
    width: 25%; 
    float:left; 
} 

.header-middle-part 
{ 
    width: 50%; 
    float:left; 
    text-align: center; 
    font-size: 18px; 
    font-weight: bold; 
    margin-top: 20px; 
} 

.header-right-part 
{ 
    width: 25%; 
    float:right; 
}