css question, please help

css question, please help

I know this is not the right place to ask for a CSS help, but it's an active good forum and my question is simple.

I just want to know why does an element take up the entire width when I set the width?

For example,

  2.     <div style="width:50px;">

  4.     
  5.     <fieldset>
  6.     <legend>test A</legend>

  8.     <table>
  9.     <tr>
  10.     <td><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </td><td>
  11.         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </td>
  12.     </tr>
  13.     
  14.     </table>
  15.         
  16.         </fieldset>
  17.     </div>

  19.     <div style=" width:300px; float:left;">
  20.     <fieldset><legend>test2</legend>
  21.     <table>
  22.     <tr>
  23.     <td><asp:Label ID="Label2" runat="server" Text="Label"></asp:Label> </td><td>
  24.         <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </td>
  25.     </tr>
  26.     </table>
  27.     </fieldset>
  28.     </div>
When I check through chrome developer's tools, I can see that the second table cannot float right next to the first table or the first div, because the first div is taking up the entire place though I limited the width. I know if used float:left in the first dive, both divs will float one after the other. But I want to know why does using width is not enough to do the trick?

Can someone please explain that to me?