SharePoint 2013 Displaying People Search Results in Multiple Columns

Tags: CSS, Design, Search, SharePoint 2013, SharePoint Online

I recently had a need to take the normal people search results in SharePoint Online and make them look better.  In particular, use all that white space to the right of the default search results listing.  Forgive the photos below.  I wanted to keep the large resolution to demonstrate the functionality here.

Default People Search Results

SP2013_PeopleSearch_Default_2014-11-05_14-38-44.png

CSS

Drop this CSS in a Content Editor Web Part on the page.

<style type="text/css">
.ms-srch-people-outerContainer {
 min-height: 200px;
 margin: 0 0 0 -10px;
 padding-bottom: 10px;
 padding-left: 10px;
 float: left;
 clear: none;
}
</style>

Updated People Search Results

SP2013_PeopleSearch_Columns_2014-11-05_14-38-44.png‚Äč

The result gives me what feels like a responsive design.  As I narrow my browser's width, the search results adjust accordingly and even maintain their order.