How do I get the red/blue divs completely to the left of the div with the repeating background image?
To the left or to the right? I assumed you wanted the div with the bg image to the left.
Indeed, that's the way to do it. At the moment, the div with bg is position:absolute, which takes it out of the document flow. If you remove that and set all divs to float: left, they won't overlap. The div with the bg will sit left and the other two divs will sit to the right of that. You'll also have to set a height on the div with the bg image.
Hoever, in general, this is not a good method for layout. If you are going to have columns, wrap each column in a div so that everything in the column stays together.