Prevent elements from breaking on seperate line when data grows.

peter liles 556 Reputation points
2021-07-14T22:34:17.98+00:00

I have the following page structure. When i enter new data inside formview insert template or select an item in gridview whos data is large from leftside DIV the controls on the right side DIV tend to break onto another line making the page badly formatted. i would prefer that element controls remain in situ relative to page size.

<style>

    body { font-size:100.5% }  

    .Particulars {  margin-right:1em;
        font:14px Times New Roman;   
        width:auto;  
        display:block;  

    }   

</style>

<div style="position:relative;width:100%" >

        **<div id="left" style="float:left;" class="Particulars" >**

       <div style="float:left;" >

        <asp:GridView ID="GridView1" runat="server" >
            />

        </asp:GridView>



            </div>

           <div >



                     <asp:FormView ID="ProductDescFormView"
            DataSourceID="SqlDataSourceDetails"
            DataKeyNames="CategoryID"    

            RunAt="server" >


          </asp:FormView>


        </div>

</div>

<div id="right" style="border-left:2px solid silver; margin-bottom:50px; float:left; padding-left:1em ">

<div  style="float:left">


<div class="Particulars"  style="float:left; " >  

<asp:GridView ID="GridView3" showfooter="True" runat="server" DataKeyNames="ID"

  >


        </asp:GridView>




    </div>

<div style="float:left" class="Particulars">
<asp:GridView ID="GrdType" runat="server" DataKeyNames="id" >

   </asp:GridView>


     <asp:DetailsView ID="DvTypeHeadings" runat="server"  Font-Size="X-Large" 
    AutoGenerateRows="False" DataKeyNames="Id"  
   >

</asp:DetailsView>

</div>

<div style="float:left" class="Particulars">

   <asp:GridView ID="GVSIZE" runat="server" DataKeyNames="id"  >

   </asp:GridView>

</div>

<div style="clear:left" >

<div style="float:left" class="Particulars">

<asp:GridView ID="GridViewBrand" showfooter="True" runat="server" DataKeyNames="ID"
CssClass="Grid" >

        </asp:GridView>

</div>

<div class="Particulars" style="float:left" >

<asp:GridView ID="GridViewMat" showfooter="True" runat="server" DataKeyNames="ID" CssClass="Grid"
>

        </asp:GridView>

</div>
<div class="Particulars" style="float:left" >

<asp:GridView ID="GridViewMisc" showfooter="True" runat="server" DataKeyNames="ID"
CssClass="Grid"
>

        </asp:GridView>

     <asp:DetailsView ID="DVHeadingMISC" runat="server"   

</asp:DetailsView>

</div>

      </div>

</div>

</div>

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,253 questions
0 comments No comments
{count} votes

Accepted answer
  1. peter liles 556 Reputation points
    2021-07-15T22:02:48.06+00:00

    My app operated OK until i enter a long sentence! I see you add numbers instead of using letters.
    What alternatives are there for layout data in this format instead of bootstrap which i guess is a library file attachment?


2 additional answers

Sort by: Most helpful
  1. Yijing Sun-MSFT 7,066 Reputation points
    2021-07-15T06:31:46.64+00:00

    Hi @peter liles ,
    According to your description,I have created a test and I don't reproduce your problems. My codes and result just like these:
    114876-new-text-document.txt
    114896-capture.png

    I suggest you could use Bootstrap grid .It use our powerful flexbox grid to build layouts of all shapes and sizes.You could post your result to us.
    Best regards,
    Yijing Sun


    If the answer is helpful, please click "Accept Answer" and upvote it.

    Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

  2. peter liles 556 Reputation points
    2021-07-16T19:26:18.717+00:00

    i tried and failed to make a difference using nowrap on the divs ?