To rearrange our widgets, perform the following steps:
1. Each sidebar widget is in an element with the
.widget-containerclass inside the primary element, so we'll float those next to each other as follows:#primary .widget-container { width: 48%; float: left; margin-right: 2%; }Now let's see how the layout is looking, as shown in the following screenshot:
Unfortunately, there is still some empty space below the search box, but we can see an improved layout starting to take shape. If your site has widget areas, which are of more similar heights, this could work without creating any empty space.
2. Finally, let's tidy up that layout by reducing the margin on the right-hand side widget so that it aligns with the right-hand side of the content. There are two ways of doing this.
The first method is to identify the unique ID of the second widget container and add a margin of zero to that. At the same time, we would need to adjust the width of the widget containers...