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