Q:

Two column of several divs

I'm making a 2-column layout with divs. 
It should be something like this: http://dl.dropbox.com/u/4976861/html-demo.html
But there is a problem.  If content stretches the side blocks vertically, the left blocks shift downwards: http://dl.dropbox.com/u/4976861/html-demo-2.html
If I put the sidebar into a wrapper div, it works fine, but it will make the code quiet messy because of the paddings and some background issues which I removed to simplify the demo, so I would like to leave this option for now. 

A:

I don't think that you're going to be able to produce the results that you would like without changing the underlying HTML.  You're trying to allow elements to flow (both vertically and horizontally) within the page, but the order in which you have the elements is not going to allow this.  
I might be teaching you to suck eggs, but my preference for the HTML output would be something like this:
<div class="wrap">
        <div class="column1">
            <div>left 1</div>
            <div>left 2</div>
            <div>left 3</div>
        </div>
        <div class="column2">
            <div>right 1</div>
            <div>right 2</div>
        </div>
 </div>

