Html 如何防止元素'；那是用div包装的吗？

我有一个包含三个部分（div）的标题。当我调整浏览器窗口的大小时，标题元素将被环绕。屏幕截图和代码如下所示：

1） HTML:

---

如何修复它？

查看此图像仅在标题类中使用渐变

---

问题是您没有足够的空间来显示内容，这就是它包装的原因。所以问题是，你对“修复”的期望是什么？隐藏一些内容？使标题本身更大一点？也许媒体查询会对你有所帮助？你的期望是在不了解事情如何运作的情况下赚钱。这是俄罗斯整体的工作方式。也许隐藏内容会合适。你可以使用

@仅媒体屏幕和（最大宽度：767px）{}

隐藏部分。我已经通过放置：最小宽度：1200px；在“header”类中。感谢Matthias和kravisingh的建议。我最初只使用了一个标题，但渐变比例中的颜色有要求，这就是为什么我使用三个div。

<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>

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;
}

<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;
}