title: CSS divide into two
body: <p>Can someone guide me - In CSS, How can I split/divide a square'ish box into two so in a middle there a gap between them. </p>
  
  <p>See <a href="http://jsfiddle.net/spKMM/1/" rel="nofollow">DEMO</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="bigBox"&gt;
      &lt;div id="leftBox"&gt;&lt;div&gt;
      &lt;div id="rightBox"&gt;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#bigBox {
  border-radius: 100px 0 100px 0;
  height: 300px;
  background: pink;
  }
  
  #leftBox {
      float:left;
  
  }
  
  #rightBox {
  float:right;
  }
  </code></pre>
  
  <p>EDIT: I know it can be done in other scripting lang but I want it in CSS and I know it is possible. Thanks.</p>