title: Fitting parent width for select in HTML5 and CSS
body: <p>I am trying to make these two Selects to fit their parent, but still no success. It looks like this: </p>
  
  <p>It is accomplished by a Table and those two Selects are placed in new Table in one of the cell of the parent Table.</p>
  
  <p>This is the code I am using.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="content"&gt;
    &lt;form id="formContent"&gt;
      &lt;table&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;label for="fullName"&gt;Full Name&lt;/label&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input id="fullName" type="text" name="fullName" required&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;label for="email"&gt;E-mail&lt;/label&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input id="email" type="email" name="email" required&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt; &lt;label for="day"&gt;Birthday&lt;/label&gt;&lt;/td&gt;
            &lt;td&gt;
              &lt;table&gt;
                &lt;tr&gt;
                  &lt;td&gt;
                    &lt;select name="day" id="day" class="styled-select" required&gt;
                      &lt;option&gt;&lt;/option&gt;
                      &lt;option value="1"&gt;1&lt;/option&gt;
                      &lt;option value="2"&gt;2&lt;/option&gt;            
                    &lt;/select&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                    &lt;select name="month" id="month" required&gt;  
                      &lt;option&gt;&lt;/option&gt; 
                      &lt;option value="1"&gt;January&lt;/option&gt;
                      &lt;option value="2"&gt;February&lt;/option&gt;         
                    &lt;/select&gt;                    
                  &lt;/td&gt;
                &lt;/tr&gt; 
              &lt;/table&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;             
    &lt;/form&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#content    {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 30%;
      width: 293px;
      margin: -8% 0 0 -156px;    
  }
  
  #formContent{  
    background:rgba(255,255,255,0.9);
    font-weight: normal;
    font-size: 0.7em;
    padding: 1em;
    text-align: right;
  }
  
  td { border: 0px solid black; margin:0; padding:0; width: 100%; }
  
  input[type=text], input[type=email], select {
    background-color: #FFFEFD;
    border: solid 1px #F15922;
    color: #000000;
    height: 1.4em;
    padding-left: 1em;
  }
  
  
  select {
    -webkit-appearance: button;
    -webkit-user-select: none;
    background-image: url("../img/arrowR.png");
    background-position: center right;
    background-repeat: no-repeat;
    padding-left: 1em;
    float: right;
  }
  </code></pre>