Two column layout that turns into a centred layout when width is reduced

My goal is to have two columns #1, side by side, centred in the page. When the window width is reduced and both columns no longer fit wide by side, they should both be #2, centred in the page, one below the other.

I accomplish #1 by putting both columns in a max-width wrapper and floating them left and right. However when the wrapper width is reduced the columns align to the left and the right, not the centre of the page.

I can accomplish #2 by di开发者_开发知识库splaying each column as inline-block and centring them. However when the wrapper is at full width, the shorter column is vertically aligned at the bottom, which often is below the screen.

Any ideas?

I can accomplish #2 by displaying each column as inline-block and centring them. However when the wrapper is at full width, the shorter column is vertically aligned at the bottom, which often is below the screen.

That will work just fine, provided that you also add vertical-align: top to whatever has display: inline-block.

The problem as you describe it: http://jsfiddle.net/thirtydot/Xyrta/

With vertical-align: top fix: http://jsfiddle.net/thirtydot/Xyrta/1/