Background color 50% one color and 50% another color

Question

Inside a div I want to put a background color in the first 50% of it's width, and another color the other 50% of it's width. Ideally On resize I want it to adjust seamlessly without any artifacts or jittery effects.

Ideally I want to avoid using other divs inside the code as I'm working with existing HTML that is difficult to change - really looking for a 100% CSS solution.

I'm looking for something like this (I mocked this up with Fireworks):

Answer 1

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%);