0

enter image description here

I have a branding project that needs 4 webparts. I have created a page layout as a home page which has the following after the ContentPlaceHolder id="PlaceHolderMain" runat="server" tag :

    <table style="width: 100%;table-layout:fixed">
        <tr>       
            <td colspan="3">
                <div data-name="WebPartZone">
                   ...
                </div>
            </td>
        </tr>       
      <tr class="lower-row">         
        <td>
            <div data-name="WebPartZone">
               ...
            </div>
        </td>
        <td>
            <div data-name="WebPartZone">
               ...
            </div>
        </td>
        <td>
            <div data-name="WebPartZone">
              ...
            </div>
        </td>           
      </tr>
    </table>

I have created the required webparts and set the page as the home page. but am having trouble with aligning and fixing the webparts as shown in the wireframe diagram.

My questions are the following: 1. How can I set the webparts to align in a fixed manner as shown in the diagram? 2. How can I set a fixed width to my home page?

0

If you see Set fixed witdh on WebPartZone in custom page layout?

Excerpt:

AFAIK WebPartZone is just a container for the WebParts and unfortunately its width is defined by the Web Part in it! Its as simple as if you have a div with fixed width and you put any control in it, then div will expand according to the width of the control.. So its not the WebPartZone you need to fix width for, instead set appropriate width to your WebPart inside WebPartZone!

So the alignment and layout really depends on what your Web Parts are going to show, they will cover the space they have got..

If you want fixed width for your HomePage, you need to add CSS to s4-workspace class and fixed the width of that.. Try inspecting the element in Chrome or Firefox and play with the CSS, once you achieve it you can apply to your HomePage..

1

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.