Question

Because of some nuances with jQuery’s Sortable, I’m displaying a table element in HTML, but using ‘s to create the columns instead of ‘s (below and in this fiddle):

<style>        
  /* Title row for an action/item */
  .item-row {
    display: table-row;
  }

  /* Keep icon columns narrow */
  .icon_column { 
    display: table-cell;
    width: 20px;
  }

  /* Item columns that are not icons */
  .name_column {
    display: table-cell;
  }    

  .extra_column {
    display: table-cell;
    float: right;
  }
</style>
<table class='table table-condensed'>
  <thead>
    <tr class='table_header'>
      <th>
        <div class='item-row'>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='name_column'>Name</span>
          <span class='extra_column'>Date</span>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class='item_row'>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='name_column'>Name 1</span>
          <span class='extra_column'>Date 1</span>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class='item_row'>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='name_column'>Row 2 Name 2</span>
          <span class='extra_column'>Date 2</span>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class='item_row'>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='icon_column'>*</span>
          <span class='name_column'>Name 3</span>
          <span class='extra_column'>Date 3</span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

I want each item-row to display as one line with the extra_column floating all the way to the right. The extra_column seems to be to the right, but the entire item-row seems to be defaulting to two lines.

How can I correct this CSS?
​

Answer 1

Is this what you are looking for?

I basically wrapped 2 groups of spans each in another span.. the first group gets float:left and the second group float:right.

CSS:

.left { float:left; }
.right { float:right;}

HTML:

<div class='item-row'>
  <span class='left'>
    <span class='icon_column'>*</span>
    <span class='icon_column'>*</span>
    <span class='icon_column'>*</span>
    <span class='name_column'>Name</span>
  </span>
  <span class='right'>
    <span class='extra_column'>Date</span>
  </span>
</div>

I must add that when the content of 1 row extends the space (width) it gets, this goes wrong. I am not sure how thát could be achieved 🙂

[UPDATE]
By giving the name_column a fixed width (like 150px), you can get rid of the issue mentioned above. It still goes wrong when the last column has too much data. That probably could be solved by also giving that a fixed width.
You can get rid of the div wrapper (‘table_container’) if you want it to span ‘the page’.