How to get panels/classes side by side in ASP.NET?

Question

This is the problem I am having:

How my page looks on firefox

and How my page looks on chrome

What I want to do is get reserve form and data source forms side by side. I have already set a class using the fieldset method but can't figure out what to use to have it side by side.

Using this for data sources form

 .tables
 {
    width:372px;
     border-color:Black;
     margin-left:150px;
     height:500px;
 }

and using this for Reserve Form

 .mreg
 {

     width:372px;
     border-color:Black;
     margin-left:150px;
     height:500px;
 }

Just want two get the two forms side by side.

Edit -

Asp.net coding for Reserve Form:

<asp:Label ID="lblerrormsg" runat="server" Text="Error Message" Visible="False"></asp:Label>
<fieldset class="mreg">
<legend>Reserve </legend>
    <asp:Label ID="Label2" runat="server" Text="Reserve ID" Font-Bold=true></asp:Label>
    <br />
    <asp:TextBox ID="txtRID" runat="server" Height="18px" Width="213px"></asp:TextBox>
     <%--<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
        ControlToValidate="txtLID" ErrorMessage="Loan ID Required"></asp:RequiredFieldValidator>--%>
        <br />
            <br />

<br />
        </fieldset>

Coding for data source form:

fieldset class="tables">
<legend>Data Sources </legend>
  <asp:Label ID="Label6" runat="server" Text="Reservation Table" Font-Bold=true></asp:Label>
  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        AutoGenerateDeleteButton="True" 
        DataKeyNames="Reservation_ID" DataSourceID="SqlDataSource1" BorderStyle="Dotted">
 </asp:SqlDataSource>
          </fieldset>

</asp:Content>

Is there anything wrong with the code?

Answer 1

You should give float:left to float to the left of screen and get side by side. Also it is not a good practice to give width as px as screen sizes vary.

.tables
 {
     width:48%;
     border-color:Black;
     float:left;
     display:block;
     height:500px;
 }

 .mreg
 {

     width:48%;
     border-color:Black;
     float:left;
     display:block
     height:500px;
 }

Answer 2

You have multiple css options that you could use. As one:

float:left;

...will allow the divs to effectively "float" to the left side of their container, which will solve your problem. However, floats are problematic for a number of reasons, and there are often better options. For example, you can consider taking advantage of the "display" css property, such as:

display: inline-block;

This would also display your divs in a horizontal fashion, and tends to behave more consistently and with fewer problems. There are more options for the "display" property, though, which is worth looking into -- a good overview of some of the options can be found here:

float:left; vs display:inline; vs display:inline-block; vs display:table-cell;