两个浮动列有背景

Question

我现在把头撞在墙上，几个小时。 我有两列的布局： http://oi62.tinypic.com/23sumbs.jpg

首先是340像素宽，第二张是860像素，如图所示。

我遇到的问题是左右列的背景......左边的列一直向左移动，右边的列一直到屏幕的右边。我怎样才能实现这一目标？

Ahy帮助会做.. 感谢

Answer 1

如果只是简单的颜色，那么背景图像（或css渐变）和每一面的阴影应该没问题：

body>div {
  background:linear-gradient(to right, darkgray 320px, gray 320px);
  width:1200px;
  margin:auto;
  box-shadow:-1000px 0  darkgray, 1000px 0 gray;
  border:solid;
}
body>div>div:first-child {
  float:left;
  width:320px;
}

<div>
  <div>left</div>
  <div>right</div>
</div>

要使用的codepen：http://codepen.io/anon/pen/JoVGaa