Different background-color for left and right half of div

Question

I have a centered div layout. The left side of the div in the background should be white and the right side should be green. Both should extend to infinity.

I think it should be quite simple but I just don't get it right now. Any easy solution? Thank you!

-----------------------------------------------------
(div 1)     __________________________ 
           |(div 2)         |         |
           |                |         |
           |                |         |
<- white   |     white      |  green  |   green  ->
           |                |         |
           |                |         |
           |________________|_________|

------------------------------------------------------

Answer 1

Add a background image with the two colors to the outer div and allow the browser to scale it (instead of tiling it).

Each color should fill exactly 50% of the width of the image to make sure the colors will never leak on either side.

Maybe even position the image absolutely behind the inner div.

For ideas how to stretch the image, see this question: CSS Background Repeat

Answer 2

Use the ::after and ::before psuedo elements. That way you can even get three colors and do the Italian flag!

div {
    height:300px;
    width:100%;
    outline:thin solid black;
    position:relative;
    background:white;
}
div::after, div::before {
    height:300px;
    content:' ';
    position: absolute;
    top: 0;
    width: 33%;
}
div::after {
    right: 0;
    background-color: red;
}
div::before {
    left: 0;
    background-color: green;
}

Here's a fiddle: http://jsfiddle.net/g8p9pn1v/

And its results:

Answer 3

You could have two divs on the outside, and then have one of your divs in each. Right-align and left-align respectively. Like so:

-----------------------------------------------------
(div)                       | (div)
           _________________|_________ 
           |(div)           |  (div)  |
           |                |         |
           |                |         |
<- white   |     white      |  green  |   green  ->
           |                |         |
           |                |         |
           |________________|_________|
                            |
------------------------------------------------------

Answer 4

How about create two divs bg-left and bg-right, with a position absolute inside a full width container. Since they are absolutely positioned, you can then layer content on top of them. So for example, using bootstrap markup:

<div class="fullwidth">
    <div class="bg-left"></div>
    <div class="bg-right"></div>    

    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                Insert left side content here...
            </div>
            <div class="col-xs-6">
                Insert right side content here...
            </div>
        </div>
    </div>
</div>

Then your css:

.fullwidth {
    position: relative;
    width: 100%;
 }
.bg-left {
    background: #000; 
    left: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    width: 50%;
}
.bg-right {
    right: 0;
    top: 0;
    bottom: 0;
    background: #ddd; 
    position: absolute;
    width: 50%;
}

Answer 5

I'd put inside that div two other divs and give them the appropriate sizes and backgound colors

Answer 6

You can use Gradient. This is a website where you can get the cross-browser code of what you need.

http://colorzilla.com/gradient-editor/

It may be a little confusing to use at the begining but I find it a very powerfull tool.

Regards!