html - How to "float: top" or close vertical gap between divs of equal size -

html - How to "float: top" or close vertical gap between divs of equal size -

what got this:

______________________________ | | | | | div 1 | | div 2 | | | | | |______________| | | | | | | wrapper |_____________| |______________ _____________| | | | div 4 | | div 3 | |_____________| |______________|_______________|

now, want this:

______________________________ | | | | | div 1 | | div 2 | | | | | |______________| | | |______________ | | | | |_____________| | div 3 | _____________| |______________| | div 4 | | wrapper |_____________| |______________________________|

is there maybe way via css(3) only?

there no float: top, can float divs 1 , 3 left, , 2 , 4 right. float space above them.

fiddle

<div class="left">1</div> <div class="right">2</div> <div class="left">3</div> <div class="right">4</div>

html css