Как сделать так, чтобы данные div не переносились на страницу ASP.NET View?

Question

У меня есть два тега DIV на моей странице просмотра Products.aspx, как показано ниже.

Когда мы минимизируем / изменяем размер окна приложения, раздел div payLoad переносится вниз.Данные с правой стороны (payLoad div) отображаются под данными с левой стороны.Я не хочу переносить данные.

Как сделать так, чтобы данные НЕ переносились вниз?

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="navigation" style="float: left; width: 250px; margin-right: 15px;"><% Html.RenderPartial("~/Views/Home/NavTree.ascx"); %></div>
<div id="payload" nowrap  style="float: left; width: 600px; "><% Html.RenderPartial("~/Views/Home/Payload.ascx"); %></div>
</asp:Content>

Answer 1

Вместо того, чтобы использовать поплавки, вы можете сделать это вместо:

<div id="columns">
  <div id="navigation">
    <% Html.RenderPartial("~/Views/Home/NavTree.ascx"); %>
  </div>
  <div id="payload">
    <% Html.RenderPartial("~/Views/Home/Payload.ascx"); %>
  </div>
</div>

С этим CSS:

#columns {
    position: relative;
}

#navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
}

#payload {
    margin-left: 265px;
}

Обратите внимание, что это вызовет проблемы, если div навигации выше содержимого, так как высота div навигации не меняет высоту его контейнера. Чтобы обойти это, вы можете добавить min-height свойство CSS к #columns.

Answer 2

Вы пробовали контейнер вокруг всего этого?

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div style="width:865px;">
<div id="navigation" style="float: left; width: 250px; margin-right: 15px;"><% Html.RenderPartial("~/Views/Home/NavTree.ascx"); %></div>
<div id="payload" nowrap  style="float: left; width: 600px; "><% Html.RenderPartial("~/Views/Home/Payload.ascx"); %></div>
</div>
</asp:Content>