Prevent elements from breaking on seperate line when data grows.

Question

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>

Answer 1

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?

Answer 2

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

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.

Answer 3

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