css double color background hack - css

Question

Hi friends is there any possible to get a double color background like this as 100% width and height like this
Here is the sample image:
Sample Image http://www.mediaserveit.com/demo/vivek/resources/question.png
(sample)white in left hand side rest of them are other color.
if i did with div's means
.left{
float:left;
width:30%;
background-color:#fff;
}
.right{
float:right;
width:70%;
background-color:#B97A57;
}
which made height problem.it increases depends upon the contents on the div's.if i use min-height means it also changed on different screens.if there any hack to set like this background in html body!because i need it in full screen

Answer 1

Use a gradient as background.
body{
background: #fcfcfc; /* Old browsers */
background: -moz-linear-gradient(left, #fcfcfc 30%, #6b1717 30%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(30%,#fcfcfc), color-stop(30%,#6b1717)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #fcfcfc 30%,#6b1717 30%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #fcfcfc 30%,#6b1717 30%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #fcfcfc 30%,#6b1717 30%); /* IE10+ */
background: linear-gradient(to right, #fcfcfc 30%,#6b1717 30%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#6b1717',GradientType=1 ); /* IE6-9 */
}
Gradient generated using: http://www.colorzilla.com/gradient-editor/
Demo: http://jsfiddle.net/guE5L/