Web Part Layout Help

Question

I need help with setting out my web part zones. I have two side by side web parts which I have coded to be expandable/collapsible but I need them to be set out so that one is under the other on the page; not side by side as this takes up too much space on the page.

I have tried to change the web part layout zone in order to do this, though the results created too much free space on the page and it was not appealing at all (see image below).

I was wondering if there was any code I could plug in to help me achieve a more ascetically pleasing finish. I want it to look something like this:

Thank you in advance.

Answer 1

The answer is a combination of CSS and page layouts.

Ideally, you'll set up your page layout and just leave any unused or unneeded Web Part Zones empty and their columns will collapse automatically. The below is an example of that.

<style>
<!--style code for Web Part Zones/columns -->
<!--Ideally this will go in your page layout's CSS file rather than on your page layout itself -->
    .Left2Col{
    float:left;
    width:33%;
    }

    .Center2Col{
    float:left;
    width:33%;
    }

    .Right2Col{
    float:right;
    width:33%;
    }
</style>
<!-- This table section goes into the body element of your page layout -->
<table id="TriColTable" style="width:100%">
    <tr id="TriColTrL" style="width:100%">
        <td id="TriColTd1" valign="top" class="Left2Col">
            <div id="SpWpContent" class="SpWpContent">
                <div data-name="WebPartZone">
                    <!-- Insert a web part zone here -->
                </div>
            </div>
        </td>
        <td id="TriColTd2" valign="top" class="Center2Col">
            <div data-name="WebPartZone">
                <!-- Insert a web part zone here -->
            </div>
        </td>
        <td id="TriColTd3" valign="top" class="Right2Col">
            <div data-name="WebPartZone">
                <!-- Insert a web part zone here -->
            </div>
        </td>
    </tr>
</table>

If you only have access to the front end (namely you don't have rights to create page layouts and can't convince an admin), you can use a script editor web part to add CSS that manually manipulates the images and text boxes through CSS. This is more than just a bit messy though.