0

I need to set two webpartzones in Horzontal way (side by side) and the third zone at the bottom of these two Zones. I need help in getting the webpart zones aligned horizontally. I used Designer manager to add the snippets and created the html file The extract of html file for the webpart zones is as follows

 <div data-name="WebPartZone">
<!--CS: Start Web Part Zone Snippet-->
<!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=xxxxxxxxxxx"%>-->
<div xmlns:ie="ie">
    <!--MS:<WebPartPages:WebPartZone runat="server" ID="xxcdxcxcxcxcxcx" TabIndex="1" BorderStyle="None" BorderWidth="0px" Height="38%" LayoutOrientation="Horizontal" Width="42%" AllowPersonalization="False" FrameType="None" Orientation="Vertical" Title="Zone1">-->
        <!--MS:<ZoneTemplate>-->
            <!--DC: Replace this comment with default web parts for new pages. -->
        <!--ME:</ZoneTemplate>-->
    <!--ME:</WebPartPages:WebPartZone>-->
</div>
<!--CE: End Web Part Zone Snippet-->

  <div data-name="WebPartZone">
<!--CS: Start Web Part Zone Snippet-->
<!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=xxxxxxxxxxx"%>-->
<div xmlns:ie="ie">
    <!--MS:<WebPartPages:WebPartZone runat="server" ID="fddsdffdsfsdffaa" TabIndex="2" BorderStyle="None" BorderWidth="0px" Height="38%" LayoutOrientation="Horizontal" Padding="4" Width="42%" AllowPersonalization="False" FrameType="TitleBarOnly" Orientation="Vertical" Title="Zone2">-->
        <!--MS:<ZoneTemplate>-->
            <!--DC: Replace this comment with default web parts for new pages. -->
        <!--ME:</ZoneTemplate>-->
    <!--ME:</WebPartPages:WebPartZone>-->
</div>
<!--CE: End Web Part Zone Snippet-->

  <div data-name="WebPartZone">
<!--CS: Start Web Part Zone Snippet-->
<!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=xxxxxxxxxxx"%>-->
<div xmlns:ie="ie">
    <!--MS:<WebPartPages:WebPartZone runat="server" ID="dfdsaeeew323333" TabIndex="5" BorderColor="Gray" BorderStyle="None" BorderWidth="0px" Height="30%" LayoutOrientation="Vertical" Width="100%" AllowPersonalization="False" FrameType="TitleBarOnly" Orientation="Vertical" Title="Zone 3">-->
        <!--MS:<ZoneTemplate>-->
            <!--DC: Replace this comment with default web parts for new pages. -->
        <!--ME:</ZoneTemplate>-->
    <!--ME:</WebPartPages:WebPartZone>-->
</div>
<!--CE: End Web Part Zone Snippet-->

Thanks Nate

2

HTML:

<div id="wrapper">
    <div class="float left">left WP zone here</div>
    <div class="float right">right WP zone here</div>
</div>
<div class="bottom">bottom< WP zone here/div>

CSS:

#wrapper {width:600px; height:300px; position:relative;}
.float {background-color:black; height:300px; margin:0; padding:0; color:white;}
.left {background-color:blue; position:fixed; width:300px;}
.right {float:right; width:300px;}
.bottom {width:600px; height:300px; background-color:red;color:white}

JSFiddle: http://jsfiddle.net/c8ph92xo/1/

  • Thank you Jussi for the response, I upped the response by 1. My question is when I specify LayoutOrientation="Horizontal", shouldn't that arrange them horizontally based on the width specified in zones. – Nate Oct 23 '15 at 12:17
  • Can you explain how is it not working? – Jussi Palo Oct 26 '15 at 6:05
  • It is working fine, but my question is, the msdn documentation says that, we can arrange the zones by specifying the LayoutOrientation. msdn.microsoft.com/en-us/library/… – Nate Oct 27 '15 at 21:58
  • I was mistaken, The LayoutOrientation property concerns how Web Parts controls are laid out in a zone. – Nate Oct 28 '15 at 15:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.