locked
Aligning webparts within a zone RRS feed

  • Question

  • I have two webparts within a single zone.  I want the left webpart to align to the top of the zone and to be right aligned.  I want the right webpart to align to the top and be left aligned.  That way they will both be in the center no mater what size screen you have.  Right now when I have a wider screen they don't align properly.  the one on the left is left justified and top aligned.  The one on the right is in the center of the screen (I assume left justified) and centered.  The left webpart is an excel chart.  The right webpart is a content editor
    Wednesday, November 20, 2013 11:43 PM

All replies

  • Web parts are HTML elements and follow css rules.  Add the vertical-align:top or whatever you want  rule to the parent HTML element of the web zone.
    If you are trying to move a newly added web part to the first position in the web part zone, use the Zone Index property or the drag and drop functionality inside of the web zone.

    http://sharepoint.stackexchange.com/questions/53967/how-to-have-two-web-parts-side-by-side-in-same-zone

    http://stackoverflow.com/questions/6390823/webpart-zones-to-be-always-right-aligned-to-the-browser


    Please remember to mark your question as answered &Vote helpful,if this solves/helps your problem. ****************************************************************************************** Thanks -WS MCITP(SharePoint 2010, 2013) Blog: http://wscheema.com/blog

    Thursday, November 21, 2013 5:30 AM
  • What I am trying to do is to get the two webparts to be centered on the webpage within the same zone.  One right aligned and one left aligned.
    Friday, November 22, 2013 4:10 PM
  • so as mentioned above you have to play with the html/css

    Each webpart zone has a property called "Orientation"

    <WebPartPages:WebPartZone runat="server" AllowCustomization="true"   
    AllowPersonalization="false" ID="MiddleTop" Title="Middle Top Zone" 
    Orientation="Vertical"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>

    Change this to "Horizontal" and they will show side by side instead of vertically.


    Please remember to mark your question as answered &Vote helpful,if this solves/helps your problem. ****************************************************************************************** Thanks -WS MCITP(SharePoint 2010, 2013) Blog: http://wscheema.com/blog

    Friday, November 22, 2013 8:35 PM
  • I must not be explaining myself very well.  They are already in a zone vertically.  The issue is that the one on the left is left justified.  The one on the right is right justified.  Therefore if you have a bigger screen the two webparts are on the opposite sides of the screen.  I want them to align in the middle.  In other words, I want the one on the left to be right justified.  I want the one on the right to be left justified.  That way no matter what screen size you have, they are in the center of the page.
    Thursday, December 5, 2013 10:47 PM