SharePoint 2010 - Page lay-out example

My colleaguea Danny Korf helped me out today by creating a page lay-out:

You can recreate this by using the following code:

<div class="w-webpartzoneWrapper">

<div class="w-webpartzoneWrap">

<div class="w-webpartzoneContainer">

ENTER WEBPARTZONE

</div>

<div style="clear:both;"></div>

<div class="w-webpartzoneContainer">

ENTER WEBPARTZONE

</div>

</div>

<div class="w-webpartzoneWrap">

<div class="w-webpartzoneContainer">

 ENTER WEBPARTZONE

</div>

<div style="clear:both;"></div>

<div class="w-webpartzoneContainer">

                  ENTER WEBPARTZONE

</div>

</div>

<div class="w-webpartzoneWrap">

<div class="w-webpartzoneContainer">

                 ENTER WEBPARTZONE

</div>

<div style="clear:both;"></div>

<div class="w-webpartzoneContainer">

                ENTER WEBPARTZONE

</div>

</div>

</div>

Add your own webpartzone where it says ENTER WEBPARTZONE. Also don't forget to add these code lines in the <style> section of the code:

.w-webpartzoneContainer{ width:100%; height:100%;}

.w-webpartzoneWrap{float:left;width:33%;}

.w-webpartzoneWrapper{ width:100%; height:100%;}

There is only one problem, when you add multiple webparts they will overlap each other and make editing a pain! I will post the solution for this when I have it :)

Posted in: Page lay-out, SharePoint 2010, SharePoint Online 2010