Putting Widgets Side by Side

OK! Classic case of RTFM on my end – after a bit of fiddling with CSS I have it.

For anyone else looking to do so:

functions.php

    register_sidebar( array(
    'name' => 'bottom-1',
    'id' => 'bottom-01',
    'before_widget' => '<div id="bottom-01">',
    'after_widget' => '</div>',
    'before_title' => '',
    'after_title' => ''
        ) );
        

    register_sidebar( array(
    'name' => 'bottom-2',
    'id' => 'bottom-02',
    'before_widget' => '<div id="bottom-02">',
    'after_widget' => '</div>',
    'before_title' => '',
    'after_title' => ''
        ) );
        
        
    register_sidebar( array(
    'name' => 'bottom-3',
    'id' => 'bottom-03',
    'before_widget' => '<div id="bottom-03">',
    'after_widget' => '</div>',
    'before_title' => '',
    'after_title' => ''
        ) );

In your theme template (I am using geo-home.php)

<div class="section group">
	<div class="col span_1_of_3">
	<?php dynamic_sidebar( 'bottom-01' ); ?>
	</div>
	<div class="col span_1_of_3">
	<?php dynamic_sidebar( 'bottom-02' ); ?>
	</div>
	<div class="col span_1_of_3">
	<?php dynamic_sidebar( 'bottom-03' ); ?>
	</div>
</div>

In your style.css

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

And as mentioned bu Guust, Set the Widget areas to 2 grid and ‘100’ not 100% and you are golden!