Arrange panels left to right in flow layout

Posted on 2006-03-29
Last Modified: 2008-03-03
Can anyone tell me why panels stack on top of each other when contained inside of a flow layout container and how to work around it? If I put labels or controls in a container with flow layout they simply flow left to right until they run out of room and then start a second row.

Here is what I am trying to accomplish.

1.   I have an page with vb that in flow layout.
2.   I have a panel in this page.
3.   Inside of this panel there are six other panels that contain datagrids and therefore will be of unknown height. These panels have a width of 45% of the parent panel.
4.   Of the six panels I may potentially display only 1 or all or any number between one and six.
5.   What I want is for the panels to flow left to right and create another row of panels once two have been displayed.
6.   Example: I need to display three of the panels. So what I would like to have happen is one row of two panels and a second row that contains the third panel on the left.
7.   Theoretically flow layout should allow me to accomplish this but seems to work different for panels than it does for other controls. Other controls flow left to right but the panels just seem to stack on top of each other for some reason.

One other note, I will not use grid layout. I have no idea how tall the panels could be and so cannot use grid layout. Plus, I personally hate the whole grid layout thing as it is a pain in the butt to work with.

Please let me know if more detail is needed on what I am trying to accomplish.
Question by:throttlenet
    LVL 4

    Expert Comment

    Create tables for organize your form, in the layout mode. You can draw different tables, one inside other tables. The rows and columns can setting as Server Controls. Select the row or column that you desire, and then press right click, and choose "Run as Server Control". When the row or column set as "Server Control", you can use properties and events.
    LVL 1

    Author Comment

    This is what I have already done. Here is a sample of what I am looking to do

    <form id="Form1" method="post" runat="server">
                <TABLE id=Table1 style="WIDTH: 640px" cellSpacing=1 cellPadding=1 width=640 border=1 RUNAT="server" MS_POSITIONING="FlowLayout">
                      <TR RUNAT="server" MS_POSITIONING="FlowLayout">
                            <td WIDTH="100%" RUNAT="server" MS_POSITIONING="FlowLayout">
                                  <asp:Panel id=Panel1 runat="server" Width="100%" MS_POSITIONING="FlowLayout">      
                                        <table WIDTH="100%" RUNAT="server" MS_POSITIONING="FlowLayout">
                                              <tr RUNAT="server" MS_POSITIONING="FlowLayout">
                                                    <td RUNAT="server" MS_POSITIONING="FlowLayout">
                                                          <asp:Panel ID=Panel2 WIDTH="300px" RUNAT="server" BORDERWIDTH="1">Panel</asp:Panel>
                                                          <asp:Panel ID=Panel3 WIDTH="300px" RUNAT="server" BORDERWIDTH="1">Panel</asp:Panel>
                                                          <asp:Panel ID=Panel4 WIDTH="300px" RUNAT="server" BORDERWIDTH="1">Panel</asp:Panel>
                                                          <asp:Panel ID=Panel5 WIDTH="300px" RUNAT="server" BORDERWIDTH="1">Panel</asp:Panel>
                                                          <asp:Panel ID=Panel6 WIDTH="300px" RUNAT="server" BORDERWIDTH="1">Panel</asp:Panel>                                                
                                        <asp:Button id=Button1 runat="server" Text="Button"></asp:Button>
                                        <asp:Button id=Button3 runat="server" Text="Button"></asp:Button>
                                        <asp:Button id=Button4 runat="server" Text="Button"></asp:Button>      
    LVL 4

    Accepted Solution

    The better, cleaner way to do it is to use CSS.  Set the "float" property of all childpanels to be "left" except for the last, one, where it should be set to "right".
    <style type="text/css">
    /* color, background, padding, etc */

    /* color,width ,  background, padding, etc */

    /* color, background, padding, etc */

    <asp:Panel id="parent" CssClass="parentPanel">
      <asp:Panel id="child1" CssClass="childPanel"></asp:panel>
        <asp:Panel id="child6" CssClass="rightMostChildPanel"></asp:panel>

    If you're displaying the panels dynamically, just set the CssClass of the final one you want to show to be "rightMostChildPanel" in code.
    LVL 1

    Author Comment

    In the code above the buttons arrange left to right without a problem but the panels sit on top of each other and I cannot get two panels on the same which is what I believe should happen.

    I added a lot of extra MS_Postioning tags to see if that would so please don't view it as I don't know what I am doing. I am simply playing around in the code to see what I can do to force the behavior I want.

    Please let me know how I need to modify the above code to get the look I want.

    Here is a visual of what I need.

    Panel2, Panel3, and Panel5 are set visible to true. This is a rough sketch what it should look like.

                             { width=640 }
     | ------------------------     -------------------------  |
     | |      Panel 1           |     |    Panel 2              | |
     | |                           |     |                             | |
     | ------------------------     -------------------------  |
     | ------------------------                                      |
     | |   Panel 5              |                                      |
     | ------------------------                                      |
    LVL 1

    Author Comment


    That does exactly what I need. It's clean and easy. I was hoping to be able to do this through the style sheet!

    I have one question and then I will give you the points.

    Is this cross-browser compatible? Is the float property recognized by all of the major browsers?
    LVL 4

    Expert Comment


    Yes, all the major browsers support float.  If you've got any more questions about what browser supports what CSS you should take a look at  Click any one of the underlined headers in those lists for nice little tables.
    LVL 1

    Author Comment

    "Sweet, sweet nectar. Its like my pool is tearing ass around the back yard, but it's standing still, still waters run deep."

    - Karl, ATHF

    Thanks for the help and the link to the browser support information.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Is Threat Intelligence?

    Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

    Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
    Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
    how to add IIS SMTP to handle application/Scanner relays into office 365.
    Here's a very brief overview of the methods PRTG Network Monitor ( offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now