title: css float 4 divs in a square order (float-left only 2° and 4° does not work)
body: <p>I have 4 divs</p>
  
  <pre><code>&lt;div id="first"&gt;&lt;/div&gt;
  &lt;div id="second"&gt;&lt;/div&gt;
  &lt;div id="third"&gt;&lt;/div&gt;
  &lt;div id="fourth"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and I need to align them in a "square" order:
  <img src="https://i.stack.imgur.com/zQnvF.jpg" alt="divs order"></p>
  
  <p>I've tried to float-left only 2°div and 4°div, but it does not work.</p>
  
  <p><br>
  Unfortunately <b>I can't use</b><br>
  a container with a defined width and all divs left-floated</p>
  
  <pre><code>&lt;div id="container" style="width: 250px"&gt;
    &lt;div id="first"  style="float: left"&gt;&lt;/div&gt;
    &lt;div id="second" style="float: left"&gt;&lt;/div&gt;
    &lt;div id="third"  style="float: left"&gt;&lt;/div&gt;
    &lt;div id="fourth" style="float: left"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>or position absolute/relative left, top etc. in my actual project...</p>
  
  <p>So I hope that there is some float trick to solve my problem..</p>