How can I align the table to the left without using float:left in the following code? Applying text-align: left to the parent element of the table doesn't seem to work as expected.
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;
}