Background color 50% one color and 50% another color

you can use something like, but based upong the browsers you have to support, it may not work across all of them.

background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);

You can use :before and :after pseudo elements.

#somediv {
  width:50%;
  height:100px;
  position: relative;
}

#somediv:after, #somediv:before {
  content:' ';
  position: absolute;
  width:50%;
  height:100%;
  z-index: -1;
}

#somediv:after {left: 0px; background: #F00;  }
#somediv:before {right: 0px; background: #00F;}

EDIT: like so http://plnkr.co/edit/hm9bHNuuzh2EK4zwn3nr?p=preview

Will even work in ie8 where gradients will not.

let me know if this need to be more tailored to your needs.