title: Separating two select boxes on same row equally in CSS
body: <p>I have a container that is a certain width. </p>
  
  <p>I have two select elements rendering on the same line in this <code>main div container</code>. The first one is absolute positioned 40px left from the <code>main div container</code> and the right one is absolute positioned 40px right from the <code>main div container</code>. Thus, resulting in a centered container within the <code>main div container</code>.</p>
  
  <p><strong>My goal is to push two select elements into the resulting container that sit on either side of either, having the same width, and having a space equidistant in the middle.</strong></p>
  
  <p>Here is my current HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;select class="edit" style="left: 40px; top: 290px; width: 136px;"&gt;&lt;/select&gt;
      &lt;select class="edit" style="left: 190px; right:40px; top: 290px; width: 136px"&gt;&lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So in this one we are assuming that the left has a combined pixel count of <code>40+136=176px, width plus left positioning</code> and the right having a pixel count of <code>190+136+40=366, left positioning plus width plus right</code>;</p>
  
  <p><strong>the result would be a container having two equidistant select boxes within the constraints of 40px each way.</strong></p>
  
  <p>I'm not sure if my math is correct but any assistance with this would be greatly appreciated.</p>