Question

Given the following code, how do I left align the table without using float:left? I thought applying text-align:left to the parent element of the table would do the job, but it doesn’t.

http://jsfiddle.net/william/B4qJG/1

HTML:

<div class="valueList">
 <div class="valuePair">
   <label>Assets</label>

  <div>
    <div>
      <div class="dataTables_wrapper">
        <table cellspacing="0" style="border-collapse:collapse;" class="display">
          <thead>
            <tr>
              <th scope="col" class="sorting_asc" style="width: 406px;">Name</th>

              <th scope="col" class="sorting" style="width: 440px;">AssetNumber</th>

              <th scope="col" class="sorting" style="width: 305px;">Action</th>
            </tr>
          </thead>

          <tbody>
            <tr class="odd">
              <td class=" sorting_1">Chair</td>
              <td>2323424</td>
              <td><a href="#">Remove</a></td>
            </tr>

            <tr class="even">
              <td class=" sorting_1">Table</td>
              <td>34345345</td>
              <td><a href="#">Remove</a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div><input type="button" value="Add Asset" />
  </div>

  <div class="clear"></div>
</div>
</div>

CSS:

.valueList
{
    width: 100%;
    text-align: left;
}

    .valueList .valuePair
    {
        width: 100%;
        padding: 0.3em 0;
        border-top: 1px #eee solid;
    }

    .valueList .valuePair *
    {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -webkit-box-sizing:border-box;
    }

    .valueList .valuePair:first-child
    {
        border-top: 0;
    }

        .valueList .valuePair > div, .valueList .valuePair > label
        {
            float: left;
            padding: 0.3em 0;
            line-height: 2em;
            border: 1px solid transparent;
        }

        .valueList .valuePair > *:first-child
        {
            width: 20%;
            /*margin-right: 1%;*/
            padding-right: 1%;
            font-weight: bold;
        }

        .valueList .valuePair > * + div
        {
            width: 75%;
            border-color: white;
            padding-left: 1%;
        }

        .valueList .valuePair > div.clear
        {
            padding: 0;
            border: 0;
            height:0;
        }

            .valueList .valuePair > * + div > input[type=text],
            .valueList .valuePair > * + div > textarea
            ,.valueList .valuePair > * + div > select
            {
                width: 100%;
                max-width: 350px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing:border-box;
            }
            .valueList .valuePair > * + div > input[type=radio],.valueList .valuePair > * + div > input[type=checkbox]
            {
                width: auto;
            }


table.display {
    width: 60%;
}

.dataTables_wrapper {
    text-align: left;
}

Answer 1

table.display {
    width: 60%;
    margin: 0;  /* <- works for me this way ****/
}