Left align columns in Web Part Page using Content Editor Web Part

Question

_{Wednesday, June 5, 2013 4:55 AM}

Hi Experts,

I am creating a page that is based on standard Web part page layout, my company does not allow SharePoint Designer or any other method of changing the page code, other than creating custom HTML Content Editor Web Part.

I want my page to be 900 pixels wide, and I have header, two columns and footer Web Part Zones.

I need left column to have fixed width of 550 pixels, with right column  340 pixels. I am using Web Part options to set left and right column Web Parts width as needed, that works fine.

So I have left side Web Parts at 550 pixels wide, 10px space between columns and 340 pixels wide right column.

Whenever I open the page on a full screen (HD resolution) Web Parts are aligned to the edges – i. e. left column is aligned to the Quick Launch and right column is aligned to the right edge of the screen.  With a lot of whitespace between them.

I seem to be unable to find that portion of the code that would align Web Parts to the left side of their respective columns.

Do you know how to make it using only Content Editor Web Part HTML source code?

I am not allowed to use any other page layout, page type or any tool that would edit the master page or page layout.

As a workaround I use two column table inserted in page body, but this is painful…

LW

All replies (5)

_{Thursday, June 6, 2013 6:48 AM}

Hi Gierasimov,

Take a look at the following similar thread, try to add custom CSS to the page.

http://social.msdn.microsoft.com/Forums/en-US/sharepointcustomization/thread/18bf53d1-30c6-4a25-a838-c8c370531deb

Best Regards.

Kelly Chen
TechNet Community Support

_{Thursday, June 6, 2013 10:31 AM}

Hi

Create a Web Part page
Choose a layout template:
Header, footer, 3 Columm for example
Save this page in a library and then download it to your local network.

If you open this page with a text editor you can see the web part zones as an HTML table

       <table cellpadding="4" cellspacing="0" border="0" width="100%">               <tr>                  <td id="_invisibleIfEmpty" name="_invisibleIfEmpty" colspan="3" valign="top" width="100%"> <WebPartPages:WebPartZone runat="server" Title="loc:Header" ID="Header" FrameType="TitleBarOnly"/> </td>             </tr>             <tr>                  <td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" height="100%"> <WebPartPages:WebPartZone runat="server" Title="loc:LeftColumn" ID="LeftColumn" FrameType="TitleBarOnly"/> </td>                  <td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" height="100%"> <WebPartPages:WebPartZone runat="server" Title="loc:MiddleColumn" ID="MiddleColumn" FrameType="TitleBarOnly"/> </td>                  <td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" height="100%"> <WebPartPages:WebPartZone runat="server" Title="loc:RightColumn" ID="RightColumn" FrameType="TitleBarOnly"/> </td>                </tr>             <tr>                  <td id="_invisibleIfEmpty" name="_invisibleIfEmpty" colspan="3" valign="top" width="100%"> <WebPartPages:WebPartZone runat="server" Title="loc:Footer" ID="Footer" FrameType="TitleBarOnly"/> </td>             </tr>             <script type="text/javascript" language="javascript">if(typeof(MSOLayout_MakeInvisibleIfEmpty) == "function") {MSOLayout_MakeInvisibleIfEmpty();}</script>        </table>

Each <TD> is a Web Part zone

You do not need Designer.
Delete or add <TD> and publish the new page in SharePoint

Miguel de Hortaleza

_{Thursday, June 6, 2013 9:29 PM}

Miguel,

Already tried this and you are right, however for this particular case I am looking for CEWP solution as the one offered in your reply will not satisfy my client.

In your code, <table cellpadding="4" cellspacing="0" border="0" width="100%">, setting values cellpadding="0" and width="33%", enables me to achieve the goal, so I must be very close to finding CEWP solution anyway.

Thanks anyway.

LW

_{Thursday, June 6, 2013 9:36 PM}

Thanks Kelly, This is not quite what I am looking for but it certainly is something I may think of developing. I need to be able to set my column widths easily, but I need content of those columns to be always left aligned, so that right hand column is not stretched to the right edge of the browser. Kind regards

LW

_{Friday, June 7, 2013 8:06 AM}

You have already tried width = "60%" and width = "40%" in their columns?

If you set a fixed width when you change the size of the page you will see blanks.

Miguel de Hortaleza