How to color a div half blue, half yellow?

Question

Please, help me to find the easiest way to achieve this result with just one single div?

<div></div>

Answer 1

You can do this:

Here is the JSFiddle demo

Snippet Example

 div{
    	width:400px;
    	height:350px;
    	background: linear-gradient(to right, blue 50%, yellow 50%);
    }

<div></div>

Answer 2

Try this code:

div {
  height: 200px;
  width: 400px;

background: blue; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, blue 50% , yellow 50%); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, blue 50%, yellow 50%); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, blue 50%, yellow 50%); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, blue 50% , yellow 50%); /* Standard syntax */
  }

<div></div>