全宽div中的多种背景颜色和图像

Question

我正在尝试为具有多种背景颜色和图像的网站制作标题。左边是棕褐色渐变和徽标图像，右边是一个渐晕/云图像，渐渐变为青色，如下图所示。

左（徽标）部分应为230px宽，右（旭日）部分应为770px宽，总共1000px，这应该居中。左侧棕褐色渐变应延伸到浏览器的左边缘，并且蓝绿色应延伸到右边缘。

我尝试用百分比来做：

CSS：

#header {
  height: 105px;
  min-width: 1000px;
}
#header .left {
  width: 31%;
  background: url(../images/header_left_gradient.png) bottom left repeat-x;
  height: 105px;
  float: left;
}
#header .left #logo {
  float: right;
  width: 230px;
}
#header .right {
  width: 69%;
  background: url(../images/header-right.png) bottom left no-repeat #009eb0;
  height: 105px;
  float: left;
}

HTML：

  <div id="header">
    <div class="left">
      <div id="logo">
        <img src="./media/images/logo.png" alt="">
      </div>
    </div>
    <div class="right">
      Text
    </div>
  </div>

这几乎可行，但标题并没有与广泛的浏览器保持一致。

Fiddle

Answer 1

设置标题边距＆amp;宽度：

#header {
    height: 105px;
    margin: 0 auto;
    min-width: 1000px;
    width: 100%;
}


#header .left {
    background: none repeat scroll 0 0 #FF00FF;
    float: right;
    height: 105px;
    width: 31%;
}


#header .right {
    background: url("../images/header-right.png") no-repeat scroll 0 0 #009EB0;
    float: left;
    height: 105px;
    width: 69%;
}

这对我有用。

Answer 2

有点hacky，但这应该可以解决问题：

body {
    text-align: center;
}

#header {
    display: inline-block;
    height: 105px;
    margin-left: auto;
    margin-right: auto;
    min-width: 1000px;
    text-align: left;
}

你可以使用包装div来应用text-align而不是body，但我发布了这个以防你不想改变结构。

Answer 3

我最终以一种黑客的方式解决了这个问题。首先，我在@Raad建议的标题周围添加了一个容器，然后在里面添加了两个div来保存我的颜色：

<div id="header-wrap">
  <div id="filler-left">
  </div>
  <div id="filler-right">
  </div>
  <div id="header">
    <div class="left">
      <div id="logo">
        <img src="./media/images/logo.png" alt="">
      </div>
    </div>
    <div class="right">
      Text
    </div>
  </div>
</div>

然后是CSS：

#header-wrap {
  width: 100%;
  position: relative;
}
#header-wrap #filler-left {
  left: 0;
  width: 50%;
  position: absolute;
  height: 105px;
  background: url(../images/header_left_gradient.png) bottom left repeat-x;
}
#header-wrap #filler-right {
  left: 50%;
  width: 50%;
  position: absolute;
  height: 105px;
  background: #009eb0;
}
#header {
  height: 105px;
  width: 1000px;
  margin: 0 auto;
  position: relative;
}

并将我的.left和.right div设置为固定宽度。工作得很好。不是我理想的解决方案，但它确实有效。