Почему вторая колонка располагается ниже первой?

Я пытаюсь сделать такую форму с помощью asp .NET:

введите сюда описание изображения

У меня при запуске пока получается вот это:

введите сюда описание изображения

Делаю всю разметку через div. В форме есть общий div, содержащий два div с классами column1 и column2 Вот весь код формы:

 <form id="form1" runat="server">
    <div>
        <div style="height: 524px; background-color:aquamarine">
        <div class="column1">
        <div>
        <asp:Label ID="productLabel" runat="server" Text="Товар"></asp:Label>
        <asp:DropDownList ID ="productList" runat="server" Height="29px">
        <asp:ListItem Selected ="True" Enabled="true" Text="Монитор" Value ="5000"></asp:ListItem>
        <asp:ListItem Selected ="False" Enabled="true" Text="Блок питания" Value ="2800"></asp:ListItem>
        <asp:ListItem Selected ="False" Enabled="true" Text="Клавиатура" Value ="1200"></asp:ListItem>
        </asp:DropDownList>
        </div>
        <div style="width: 190px; height: 27px;">
            <asp:Label ID ="costLabel" runat="server" Text="Цена"></asp:Label>
            <asp:TextBox ID ="costValue" runat ="server" Enabled ="false" Width="119px"></asp:TextBox>
            <asp:Label runat="server" Text="руб."></asp:Label>
        </div>
        <div style="width: 179px">
            <asp:Label runat ="server" Text="Количество"></asp:Label>
            <asp:TextBox runat="server" Width="88px"></asp:TextBox>
        </div>
         <div style="height: 24px; width: 185px">
                <asp:Label ID="BasketLabel" runat="server" Text="Товары к оплате"></asp:Label>
                <asp:ListBox ID="ListBox1" runat="server" Height="344px" Width="188px"></asp:ListBox>
         </div>
            </div>
            <div class ="column2">
                <div style="width: 176px; display : inline-block">
                    <asp:Label ID ="DataLabel" runat="server" Text="Дата"></asp:Label>
                    <asp:Button ID ="CalendarButton" runat="server" Text=">" Width="20px" OnClick="CalendarButton_Click" />
                    <asp:Calendar ID ="Calendar" runat ="server" BackColor="White" BorderColor="#3366CC" BorderWidth="1px" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="#003399" Height="136px" Width="129px">
                        <DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
                        <NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
                        <OtherMonthDayStyle ForeColor="#999999" />
                        <SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
                        <SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
                        <TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px" Font-Bold="True" Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
                        <TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
                        <WeekendDayStyle BackColor="#CCCCFF" />
                    </asp:Calendar>
                    </div>
                    <div style="height: 24px; width: 187px">
                        <asp:Label runat ="server" Text ="Покупатель"></asp:Label>
                        <asp:TextBox runat="server"></asp:TextBox>
                    </div>
                <div style="width: 143px">
                    <asp:Button ID ="addButton" runat="server" Text="Добавить" />
                    <asp:Button ID ="deleteButton" runat="server" Text="Удалить" />
                    <asp:Button ID ="clearButton" runat="server" Text="Очистить список" />
                    <asp:Button ID ="invoiceButton" runat="server" Text="Квитанция" />
                </div>
                </div>
        </div>
        </div>
</form>    

Вот мой css-код:

div {
display : inline-block;  
}

.column1 {
justify-content : left;
}

.column1 div {
display: block;
margin-top : 20px;
margin-bottom: 20px;
}
.column1 label {
margin-left : 20px;
}

.column2 {
justify-content : right;
}
.column2 div {
display : block;
margin-top : 20px;
margin-bottom : 20px;
}

Не пойму почему вторая колонка у меня уехала вниз. Как ее можно поднять?


Ответы (0 шт):