A cleaner layout when using the web part tool pane!

How many times have you gone to edit a web part on the page, only to have to scroll to the right to see the tool pane?

If you happen to have a large screen then this is not much of an issue, but if you have a smaller screen or have numerous windows open it can become a pain.

Here is a great workaround I have come up with that solved my problem.

Move the MSO_Content Div Tag

First in your custom master page, you want to locate the div tag <div id=”MSO_ContentDiv” runat=”server”> (for more clarification on this div tag I suggest reading this post by Waldek Mastykarz).

I want to  wrap the content that holds the left nav and the main content with this div tag. For this example I added the div tag directly before the  <div id=”s4-mainarea”>.

<div id="MSO_ContentDiv" runat="server">
<div id="s4-mainarea" class="s4-pr s4-widecontentarea">
....
</div><!-- end #s4-mainarea-->
</div><!-- end#MSO_ContentDiv—>

Update your custom CSS file

Next add the following CSS to your page layout or to your Custom CSS file.

#MSOTlPn_WebPartPageDiv #s4-leftpanel {display: none;}
#MSOTlPn_WebPartPageDiv div#MSO_ContentTable {margin: 0px !important;}

A cleaner layout

When in normal edit mode your page looks like this.

When editing a web part and the tool pane is needed your page will look like this:

As you can see your left navigation is hidden and your content area has been moved over to the left. You could take this further with your page layouts and un-float specific elements so that they fall in line on the page for easier editing.

Note: If you have web parts in your left hand column that need editing this is not the solution for you.

Thanks for reading!

, , , ,