Space between Widgets

[sunnypapabear]

I've Registered a widget to go on a Static Page on my Front Page that creates two side-by-side widgets. However, I have not figured out how to put a small space between the two widgets. Below is the Custom Code that went into the Functions.php and then the Custom CSS to style the widgets.

I am running the Prose Theme - XHTML not HTML5.

Custom Code for Function.php:
// Register page widget areas

genesis_register_sidebar( array(
'id' => 'page-widget-left',
'name' => __( 'Page Widget Left', 'nabm' ),
'description' => __( 'This is the left widget area for a specific page.', 'nabm' ),
) );
genesis_register_sidebar( array(
'id' => 'page-widget-right',
'name' => __( 'Page Widget Right', 'nabm' ),
'description' => __( 'This is the right widget area for a specific page.', 'nabm' ),
) );

// Add the page widget in the content
add_action( 'genesis_after_post_content', 'nabm_add_page_content' );
function nabm_add_page_content() {
if ( is_page('1522') ) {

echo '<div class="page-widget-container"><div class="wrap">';

genesis_widget_area ('page-widget-left', array(
'before' => '<div class="page-widget one-half first">',
'after' => '</div>',
) );

genesis_widget_area ('page-widget-right', array(
'before' => '<div class="page-widget one-half">',
'after' => '</div>',
) );

echo '</div></div>';

}
}

Custom Code for CSS:
/* Front Page Widgets for after Content */
.page-widget {
line-height: 1.5;
padding: 5px;
border: 1px solid #FFFFFF;
}

.page-widget p {
margin-bottom: 24px;
text-align: center;
padding: 5px;
font-size: 14px;
}

.page-widget.one-half {
padding: 5px;
width: 45%;
float: center;
}

[sunnypapabear]

Forgot the URL http://PeterCruikshank.com/dev

[PyramidWeb]

Hi Peter,

First, "float: center;" does not exist, see in the css you posted above. This is correct (I guess it's correct in your css already):

.page-widget.one-half {
    float: left;
    padding: 5px;
    width: 45%;
}

Second, to put a small space between the widgets, seach for ".first" in your css and change it as follows or add this part to your custom css:

.first {
    clear: both;
    margin-right: 5%;
}

This adds a margin of 5% to the right side of the first (i.e., the left) of the two widgets. You might need to omit "clear: both;" if you add the above css to your custom css, depending on where this custom part is inserted.

[sunnypapabear]

Thanks, that solve the problem. Appreciate it.

[Author]

Posts