Move divs in pairs on window resize

Vote count: 0

This should be simple for you CSS gurus, but I really can't get this going. There are 4 boxes, example code:

<div id="wrapper">
    <div id="firstPair">
        <div style="width: 200px; float: left"></div>
        <div style="width: 200px; float: left"></div>
    </div>
    <div id="secondPair">
        <div style="width: 200px; float: left"></div>
        <div style="width: 200px; float: left"></div>
    </div>
</div>

When the window width is less than 800 only the rightmost div is moved, leaving them with 3 on top, and 1 on the next row.

I want the second two to go down the page as a pair. 2 on top, 2 on bottom, even if there is space for 3 next to eachother.

asked 15 secs ago

Neekoy

Let's block ads! (Why?)

Move divs in pairs on window resize