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 开发者_JS百科would like to leave this option for now.

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>

Put this under the 2 divs:

<div style="clear:both;"></div>