Arrange panels left to right in flow layout

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 asp.net 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.
LVL 1
throttlenetAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

pbocanegraCommented:
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.
0
throttlenetAuthor Commented:
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>                                                
                                                </td>
                                          </tr>
                                    </table>
                                    <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>      
                              </asp:Panel>                                                
                        </td>
                  </TR>
            </TABLE>
    </form>
0
noamattdCommented:
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">
.parentPanel
{
 width:100%;
/* color, background, padding, etc */
}

.childPanel
{
 float:left;
/* color,width ,  background, padding, etc */
}

.rightMostChildPanel
{
 float:right;
/* color, background, padding, etc */
}
</style>

<asp:Panel id="parent" CssClass="parentPanel">
  <asp:Panel id="child1" CssClass="childPanel"></asp:panel>
  ...
    <asp:Panel id="child6" CssClass="rightMostChildPanel"></asp:panel>
</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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

throttlenetAuthor Commented:
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              |                                      |
 | ------------------------                                      |
 ---------------------------------------------------------
0
throttlenetAuthor Commented:
noamattd,

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?
0
noamattdCommented:
throttlenet,

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 http://www.westciv.com/style_master/academy/browser_support/index.html.  Click any one of the underlined headers in those lists for nice little tables.
0
throttlenetAuthor Commented:
"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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.