title: CSS Positioning: Why doesn't the width attribute work for these divs?
body: <p>I am developing a new HTML/CSS screen. I two fields:</p>
  
  <ul>
  <li>Personal Cell</li>
  <li>Personal Email</li>
  </ul>
  
  <p>Both are controlled by the same CSS class( eci_text), both are in a div.   Putting in width values for that class seems to have no effect on the div.   Why is that and what can I do about it?   I would like the the text fields next to each of the 2 strings above to line up vertically ( that is why I want to adjust the width of the eci_text divs )</p>
  
  <p>Thanks much in advance</p>
  
  <p>Steve</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"&gt;
      &lt;title&gt;Acme Emergency Page&lt;/title&gt;
      &lt;style TYPE="text/css"&gt;
          body 
          {
              background-color:white;
          }
          #container
          {
              margin-left:auto;
              margin-right:auto;
              text-align:center;
              width: 99%;
              font-family:Arial,Helvetica;
              font-size:10pt;
          }
          #eci_container
          {
              margin-left:auto;
              margin-right:auto;
              width:500px;
              text-align:center;
          }
          .paragrah_left
          {
              text-align:left;
          }
          .eci_textfield_container
          {
              text-align:left;
          }
          .eci_text
          {
              text-align:left;
              display:inline;
              width:150px;
          }
          .eci_textfield
          {
              text-align:left;
              display:inline;
          }
          .eci_checkbox
          {
              margin-left:40px;
              text-align:left;
          }
  
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
   &lt;div id="container"&gt;
       &lt;!-- Content: Start div content: Main content area --&gt;
       &lt;div id="content"&gt;
       &lt;h2&gt;ACME Emergency Contact Information &lt;/h2&gt;
  
  
  
  
  &lt;!-- Start: ECI Container --&gt;
  &lt;div id = "eci_container"&gt;
  
      &lt;p class = "paragrah_left"&gt;
          This voluntary information will only be used by the ACME Emergency 
          Fruit &amp; Vegetable System (FAV) to tell you about emergencies when they 
          arise, whether you are at work or not.
      &lt;/p&gt;
  
      &lt;div class = "eci_textfield_container"&gt;
          &lt;div class = "eci_text"&gt;        
              Personal Cell*: 
          &lt;/div&gt;
          &lt;div class = "eci_textfield"&gt;  
              &lt;input type = "text" name= "personal_cell_phone_number"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class = "eci_checkbox"&gt;
          &lt;input type = "checkbox" name = "checkBoxVisiblePersonalCellPhoneNumber"&gt;
          Make my personal cell phone number visible to Mark Zuckerberg's staff
      &lt;/div&gt;
  
      &lt;div class = "eci_checkbox"&gt;
          &lt;input type = "checkbox" name = "checkBoxUsePersonalCellPhoneNumberForAlerts"&gt;
          Use this number for ENS SMS text alerts
      &lt;/div&gt;
  
      &lt;p class = "paragrah_left"&gt;
          If you do not want your personal cell phone used, please call
      &lt;/p&gt;
  
      &lt;div class = "eci_textfield_container"&gt;
          &lt;div class = "eci_text"&gt;
              Personal Email*:
          &lt;/div&gt;
          &lt;div class = "eci_textfield"&gt;  
              &lt;input type = "text" name= "personal_email"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;p class = "paragrah_left"&gt;
          If you do not want your personal email used please call
      &lt;/p&gt;
  
  
  
  
  
  
  &lt;!-- End: ECI Container --&gt;
  &lt;/div&gt;
  &lt;!-- Content: Close div id ="content"  --&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>