title: Align contents of DIV always on one line
body: <p>I have the following :</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;th class="sort"&gt;
  &lt;div&gt;
      &lt;div class="sort"&gt;&lt;/div&gt;&lt;a href="#"&gt;Last Name&lt;/a&gt;
  
  &lt;/div&gt;
  &lt;/th&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>table.tablesorter thead th.sort
  {
      padding:0;
  }
  
  table.tablesorter thead th div.sort 
  {
      margin:0;
      width:15px;
      height:30px;
      float:left;
      background: url("/Content/images/admin/sort.png") no-repeat;
      background-position: 0px center;
      cursor:pointer;
  }
  
  table.tablesorter thead tr th.sort a 
  {
      cursor:pointer;
   color:inherit;
      vertical-align:middle;
      float: left; 
      padding-top: 7px;
  }
  </code></pre>
  
  <p>I want to display inner  and  inside  vertically aligned middle and always on ONE line so that when a browser window is resized (small) it will not break and  will not more underneath inner  (which is what is happening now).
  thanks</p>