Две плавающие колонны с фоном

Question

Я ударил головой о стену на этом, вот уже пару часов. У меня есть макет с двумя столбцами: http://oi62.tinypic.com/23sumbs.jpg

Первый является 340 точек в ширину, второй является 860px, как показано на картинке.

Проблема У меня есть фоны для левого и правого колонок .. они идут в левом столбце полностью влево, а для правого столбца - вплоть до правой части экрана. Как я могу достичь этого?

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