html - Two floating columns with background -

im banging head against wall on one, couple of hours now. have layout 2 columns: http://oi62.tinypic.com/23sumbs.jpg

first 340 px wide, second 860px seen on picture.

problem have backgrounds left , right colum.. go left column way left, , right column way right side of screen. how can achieve this?

ahy do.. thanks

if plain colors background-image (or css gradient) , shadows on each sides should fine:

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>

a codepen play with: http://codepen.io/anon/pen/jovgaa