how to align two divs Vertically?

Question

0.00/5 (No votes)

See more:

XML

<%@ Page Title= "Stock Price" Language="C#" AutoEventWireup="true" CodeFile="AssignmentPrice.aspx.cs" Inherits="Assignment_Price"
    MasterPageFile="~/Site.master"%>

<asp:Content runat="server" ID="HeaderContent" ContentPlaceHolderID="HeadContent">
    <style type="text/css">
        table
        {
          border-collapse: collapse;
        }

        table, td, th
        {
            border: 1px solid black;
        }
        table
        {
          width: auto;
        }

        th
        {
            height: 50px;
            align-content :center;
            background-color: #4b6c9e;
            color: white;
        }
        .auto-style1
        {
            width: 120px;
        }
        .auto-style2
        {
            width: 465px;
        }
        .auto-style3
        {
            width: 8px;
        }
        .auto-style4
        {
            width: 269px;
        }
        .auto-style5
        {
            width: 1134px;
        }
        </style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div>
<div style="width: 480px">
    <table style="width:auto">
      <tr>
         <th class="auto-style2">
             <asp:Label ID="Label5" runat="server" Text="Assignment Price"></asp:Label>
         </th>
        <%-- <th class="auto-style2">
             <asp:Label ID="Label17" runat="server" Text="Seat Price"></asp:Label>
         </th>--%>

     </tr>
 </table>
 <table style="width:auto">

     <tr>
            <td class="auto-style1">
                <asp:Label ID="Label1" runat="server" Text="Flag Down: " style="font-weight: 700"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="flagdown" runat="server" ToolTip="Flag Down" OnTextChanged="flagdown_TextChanged" AutoPostBack="True"></asp:TextBox>
            </td>
            <td class="auto-style3">
                <asp:Label ID="Label6" runat="server" Text=" * "></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="FlagUnit" runat="server" Width="79px" ToolTip="Flag Unit" OnTextChanged="FlagUnit_TextChanged" AutoPostBack="True"></asp:TextBox>
            </td>
            <td class="auto-style3">
                <asp:Label ID="Label12" runat="server" Text=" = "></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="Flagtotal" runat="server" Width="79px" ToolTip="Flag Total" OnTextChanged="Flagtotal_TextChanged" AutoPostBack="True"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="auto-style1">
                <asp:Label ID="Label2" runat="server" Text="Time Fare: " style="font-weight: 700"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="timefare" runat="server" ToolTip="Time Fare" OnTextChanged="timefare_TextChanged" AutoPostBack="True"></asp:TextBox>
            </td>
             <td class="auto-style3">
                <asp:Label ID="Label7" runat="server" Text=" * "></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="timeunit" runat="server" Width="79px" ToolTip="Time Unit" OnTextChanged="timeunit_TextChanged" AutoPostBack="True"></asp:TextBox>
            </td>
             <td class="auto-style3">
                <asp:Label ID="Label13" runat="server" Text=" = "></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="timetotal" runat="server" Width="79px" ToolTip="Time Total" OnTextChanged="timetotal_TextChanged" AutoPostBack="True"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="auto-style1">
                <asp:Label ID="Label3" runat="server" Text="Length Fare: " style="font-weight: 700"></asp:Label>
             </td>
             <td>
                <asp:TextBox ID="lengthfare" runat="server" ToolTip="Length Fare" OnTextChanged="lengthfare_TextChanged" AutoPostBack="True"></asp:TextBox>
            </td>
             <td class="auto-style3">
                <asp:Label ID="Label8" runat="server" Text=" * "></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="lengthunit" runat="server" Width="79px" ToolTip="Length Unit" OnTextChanged="lengthunit_TextChanged" AutoPostBack="True"></asp:TextBox>
            </td>
             <td class="auto-style3">
                <asp:Label ID="Label14" runat="server" Text=" = "></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="lengthtotal" runat="server" Width="79px" ToolTip="Length Total" OnTextChanged="lengthtotal_TextChanged" AutoPostBack="True"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="auto-style1">
                <asp:Label ID="Label4" runat="server" Text="Waiting Fare: " style="font-weight: 700"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="waitingfare" runat="server" ToolTip="Waiting Fare" OnTextChanged="waitingfare_TextChanged" AutoPostBack="True"></asp:TextBox>
            </td>
             <td class="auto-style3">
                <asp:Label ID="Label9" runat="server" Text=" * "></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="waitingunit" runat="server" Width="79px" ToolTip="Waiting Unit" OnTextChanged="waitingunit_TextChanged" AutoPostBack="True"></asp:TextBox>
            </td>
             <td class="auto-style3">
                <asp:Label ID="Label15" runat="server" Text=" = "></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="waitingtotal" runat="server" Width="79px" ToolTip="Waiting Total" OnTextChanged="waitingtotal_TextChanged" AutoPostBack="True"></asp:TextBox>
            </td>
        </tr>
 </table>
    <br/>

    <table style="width:auto">
       <tr>
            <td>
                <asp:Label ID="Label10" runat="server" Text="Inclusive Assignment Price :" style="font-weight: 700"></asp:Label>
            </td>
            <td class="auto-style4">
                <asp:TextBox ID="IncPrice" runat="server" Width="263px" ToolTip="Inclusive Assignment Price" AutoPostBack="True" OnTextChanged="IncPrice_TextChanged"></asp:TextBox>
            </td>
        </tr>
       <tr>
            <td>
                <asp:DropDownList ID="VatDropDown" runat="server" Height="18px" Width="191px" AutoPostBack="True" OnSelectedIndexChanged="VatDropDown_SelectedIndexChanged">
                </asp:DropDownList>
            </td>
           <td class="auto-style4">
               <asp:TextBox ID="VatRate" runat="server" Height="16px" Width="262px" Enabled="False"></asp:TextBox>
           </td>
      </tr>
        <tr>
            <td>
                <asp:Label ID="Label11" runat="server" Text="Exclusive Assignment Price :" style="font-weight: 700"></asp:Label>
            </td>
            <td class="auto-style4">
                <asp:TextBox ID="ExclusivePrice" runat="server" Width="190px" ToolTip="Exclusive Assignment Price"></asp:TextBox>
                <asp:DropDownList ID="spCurr" runat="server" Height="18px" Width="66px" AutoPostBack="True">
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="Label16" runat="server" Text="Network Fee :" style="font-weight: 700"></asp:Label>
            </td>
            <td class="auto-style4">
                <asp:TextBox ID="NetworkFee" runat="server" Width="120px" ToolTip="Network Fee" OnTextChanged="NetworkFee_TextChanged"></asp:TextBox>
                <asp:DropDownList ID="NetfeeCurr" runat="server" Height="18px" Width="66px" AutoPostBack="True">
                </asp:DropDownList>
                <asp:DropDownList ID="netType" runat="server" Height="18px" Width="66px" AutoPostBack="True">
                </asp:DropDownList>
            </td>
        </tr>
        </table>
     </div>
    <br />
    <div style="margin-left:490px">
   <table style="width:auto; float:right; margin-left: 0px;">
      <tr>
         <th class="auto-style2">
             <asp:Label ID="Label17" runat="server" Text="Seat Price"></asp:Label>
         </th>
     </tr>
   </table>
    </div>
    </div>
    </asp:Content>

Posted 16-Aug-14 0:19am

M.Islam Manzoor

Add a Solution

Comments

M.Islam Manzoor 16-Aug-14 6:23am

I want to align the lowest div vertically at the same point from top.Currently it is appearing after the above div.

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Abhinav S · Answer 1 · 2014-08-16T00:28:00

Solution 1

Use float left and right

For e.g.

<div style="float:left">
/*Content*/
</div>

XML

<div style="float:right">
/*Content*/
</div>

Posted 16-Aug-14 0:28am

Abhinav S

how to align two divs Vertically?

1 solution

Solution 1

Add your solution here

Preview 0

how to align two divs Vertically?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us