Override bootstrap float & margin - css

Question

I have a page that looks like the following.
Now I am trying to replicate this by using twitter boostrap <div class= hero-unit>. I have the done the following:
<div class="center hero-unit">
<table class="form">
<tr>
<td>
<%= form_for(#user) do |f| %>
<% if #user.errors.any? %>
<div id="error_explanation" xmlns="http://www.w3.org/1999/html">
<h2><%= pluralize(#user.errors.count, "error") %> prohibited this user from being saved:</h2>
<ul>
<% #user.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
</td>
</tr>
<tr>
<td class="th" colspan="2">Login Details</td>
</tr>
<tr>
<% if #user.id %>
<td><%= f.label :id %></td>
<td><%= #user.id %></td>
<% end %>
</tr>
<tr>
<td><%= f.label :current_sign_in_at, "Sign in time" %></td>
<td><%= #user.current_sign_in_at.nil? ? "Not signed in" : #user.current_sign_in_at.strftime('%d-%b-%Y %H:%M:%S') %></td>
</tr>
<tr>
<td> <%= f.label :first_name %>
<br/></td>
<td><%= #user.first_name %></td>
</tr>
<tr>
<td><%= f.label :last_name %>
<br/></td>
<td><%= #user.last_name %></td>
</tr>
<tr>
<td><%= f.label :email %>
<br/></td>
<td><%= #user.email %></td>
</tr>
<% if can? :manage, :all %>
<tr>
<td class="th" colspan=2>Roles and Privileges</td>
</tr>
<tr>
<% for role in Role.all %>
<td><%= role.name %><%= check_box_tag "user[role_ids][]", role.id, #user.roles.include?(role), :disabled => true %></td>
<% end %>
</tr>
<% end %>
<tr>
<td>
<%= link_to 'Edit', edit_user_path(#user), :class => 'btn btn-medium' %> |
<%= link_to 'Back', usermanagement_path, :class => 'btn btn-medium' %>
</td>
</tr>
</table>
<table class="form" >
<% if #user == current_user %>
<caption><b>Previous Orders</b></caption>
<thead>
<tr>
<th>Order No:</th>
<th>Order Date</th>
<th>Quantity</th>
<th>Total</th>
<th>View Order</th>
</tr>
</thead>
<% current_user.orders.each do |order| %>
<tr>
<td style="width: 10px;"><%= order.id %></td>
<td><%= order.created_at.to_s(:short) %></td>
<td><%= order.quantity %></td>
<td><%= number_to_currency(order.total_price, :unit => "£") %></td>
<td><%= link_to 'View Order',(order)%></td>
</tr>
<% end %>
<% if current_user.orders.empty? %>
<tr>
<td>No bookings found</td>
</tr>
<% end %>
</table>
</div>
<% end %>
<% end %>
The above changes output the following:
So what my question is how can I possibly get it to be aligned to the right of the login details. I did attempt to do the following <table style="float: left; margin-left: 20px;"> on the Previous Orders table. Why is this not working!

Answer 1

I have tried to mock the tables you have shown below. Since you are using Bootstrap I will advise you to take a look at Responsive Tables .There are various examples of how you can create and represent tables for smaller screens as well .
Here's the jsfiddle with the same Jsfiddle with tables
<div class="hero-unit">
<div class="row">
<div class="span4">
<table class="table table-condensed">
<thead>
<tr>
<th>Login Details</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>ID</td>
<td>1</td>
</tr>
<tr class="error">
<td>Sign in Time</td>
<td>01/04/2013 11:35am</td>
</tr>
<tr class="warning">
<td>First Name</td>
<td>Jack</td>
</tr>
<tr class="info">
<td>Last Name</td>
<td>Sparrow</td>
</tr>
<tr class="warning">
<td>Email Id</td>
<td>jack#sparrow.com</td>
</tr>
</tbody>
</table>
</div>
<div class="span8">
<table class="table table-condensed">
<thead>
<tr>
<th>Order no</th>
<th>Order Date</th>
<th>Quantity</th>
<th>Total</th>
<th>View order</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
<td>View Order</td>
</tr>
<tr class="error">
<td>2</td>
<td>TB - Monthly</td>
<td>02/04/2012</td>
<td>Declined</td>
</tr>
<tr class="warning">
<td>3</td>
<td>TB - Monthly</td>
<td>03/04/2012</td>
<td>Pending</td>
</tr>
<tr class="info">
<td>4</td>
<td>TB - Monthly</td>
<td>04/04/2012</td>
<td>Call in to confirm</td>
</tr>
</tbody>
</table>
</div>
</div>