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

Improve this question

1 Answer 1

Reset to default
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/

Improve this answer
4
  • 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.
    – Daniel
    Oct 23, 2015 at 12:17
  • Can you explain how is it not working?
    – Jussi Palo
    Oct 26, 2015 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/…
    – Daniel
    Oct 27, 2015 at 21:58
  • I was mistaken, The LayoutOrientation property concerns how Web Parts controls are laid out in a zone.
    – Daniel
    Oct 28, 2015 at 15:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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