none
making web part zones loading side by side

    Question

  • Hello,

    I have a page layout in which I want two web parts zones to load side by side..below is the markup..What i did was create atable and then have 3 rows..I want in the last row that the two web part zones load side by side..I did the orientation horizontal but it is not affecting anything..can someone please tell me what I am doing wrong here.

    <table id="middle-zones" border="1" cellpadding="0" cellspacing="0">
                        <tr><td>
                            <WebPartPages:WebPartZone runat="server" AllowCustomization="true"  AllowPersonalization="false" ID="MiddleTop" Title="Middle Top Zone" Orientation="Vertical"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone></td></tr>
                        <tr><td><div class="page-layout-middle-left"><!-- -->
                            <WebPartPages:WebPartZone runat="server" AllowCustomization="true"   AllowPersonalization="false" ID="MiddleLeftZone1" Title="Middle Left Zone 1 " Orientation="Vertical"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone></div><div class="page-layout-middle-right"><!-- -->
                            <WebPartPages:WebPartZone runat="server" AllowCustomization="true"  AllowPersonalization="false" ID="MiddleRightZone1" Title="Middle Right Zone 1" Orientation="Vertical"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone></div></td></tr>
                            <tr><td><div class="page-layout-middle-left">
                            <WebPartPages:WebPartZone runat="server" AllowCustomization="true"  AllowPersonalization="false" ID="MiddleLZone2" Title="Middle Left Zone 2" FrameType="TitleBarOnly"  Orientation="Horizontal"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone><!-- -->
                            <WebPartPages:WebPartZone runat="server"  AllowCustomization="true"  AllowPersonalization="false" ID="MiddleRZone2" Title="Middle Right Zone 2" FrameType="TitleBarOnly" Orientation="Horizontal"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone></div></td></tr>
                    </table>


    Wednesday, May 02, 2012 1:14 PM

Answers

  • The easiest way to do this is to create two cells <TD>s in the last row and set the other rows to Collspan = 2.  Then put one web part zone in each cell.

    Paul Stork SharePoint Server
    MVP Senior Solutions Architect: BlueChip Consulting Group
    Blog: http://dontpapanic.com/blog
    Twitter: Follow @pstork
    Please remember to mark your question as "answered" if this solves your problem.

    • Marked as answer by Sharepoint997 Wednesday, May 02, 2012 2:51 PM
    Wednesday, May 02, 2012 1:20 PM
  • Hi

    another way

    in the last row insert a new table

    with one row and 2 columns

    <table>

    <tr>

    <td></td>

    <td></td>

    </tr>

    </table>


    Romeo Donca, Orange Romania (MCSE, MCTS, CCNA) Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.

    • Marked as answer by Sharepoint997 Wednesday, May 02, 2012 2:51 PM
    Wednesday, May 02, 2012 1:31 PM

All replies

  • The easiest way to do this is to create two cells <TD>s in the last row and set the other rows to Collspan = 2.  Then put one web part zone in each cell.

    Paul Stork SharePoint Server
    MVP Senior Solutions Architect: BlueChip Consulting Group
    Blog: http://dontpapanic.com/blog
    Twitter: Follow @pstork
    Please remember to mark your question as "answered" if this solves your problem.

    • Marked as answer by Sharepoint997 Wednesday, May 02, 2012 2:51 PM
    Wednesday, May 02, 2012 1:20 PM
  • Thanks for the quick reply Paul..yeah that will work..but I was just wondering why is the horizontal thing not working..The last two web part zones are defined in just one TD so when we set the property to horizontal shouldn't they load side by side.
    Wednesday, May 02, 2012 1:23 PM
  • Hi

    another way

    in the last row insert a new table

    with one row and 2 columns

    <table>

    <tr>

    <td></td>

    <td></td>

    </tr>

    </table>


    Romeo Donca, Orange Romania (MCSE, MCTS, CCNA) Please Mark As Answer if my post solves your problem or Vote As Helpful if the post has been helpful for you.

    • Marked as answer by Sharepoint997 Wednesday, May 02, 2012 2:51 PM
    Wednesday, May 02, 2012 1:31 PM
  • Thanks Romeo..Yeah that will work too but I just wanted to know am I doing something wrong with the Orientation poperty.
    Wednesday, May 02, 2012 1:37 PM
  • Vertical and horizontal on the zone refers to how web parts inside the zone are arranged, not how the zones themselves are aligned.  to put htem side by side you need to either put them in a cell or put them in seperate <div> tags set to float.

    Paul Stork SharePoint Server
    MVP Senior Solutions Architect: BlueChip Consulting Group
    Blog: http://dontpapanic.com/blog
    Twitter: Follow @pstork
    Please remember to mark your question as "answered" if this solves your problem.

    Wednesday, May 02, 2012 2:40 PM
  • That's what I was looking for.I knew I had done it before but forgot that it's web parts inside the zone. ..Thank you
    Wednesday, May 02, 2012 2:50 PM