I have an issue with two column layout. Here is the issue replicated on codepen [http://codepen.io/jevg/pen/DHzEf](http://codepen.io/jevg/pen/DHzEf “Example”). The thing is that when clicking expand block number 4 is moved down. Is there any way to make it sit just under block number 2 without wrapping columns with additional divs?
Flexbox might work but isn’t practical to use yet.
Things flow in lines in CSS so when you have two inline or floated elements on the same line then the next line begins after the tallest element as that is the height of the line. So that very much prevents what you want.
Of course you do need to have a parent element that has `text-align: center;` but if you use it as default in the body and let it cascade until you absolutely don’t need it anymore then you can keep playing around with centered columns as long as you like.
thanks for your answers. I need deep browser support (IE7 and up) for this one so Flexbox is not an option.
@Merri: yeap, wrapped it with additional containers. The problem with this solution is element order in the markup. Meaning if user will tab through links it will go like this 1, 3, 5, 2, 4, 6, but i wanted it to go 1, 2, 3, 4, 5, 6.
Fixed that with tabindex, not sure if this is best option though.