How create 3 widget areas in one row

[MrNerdy]

Similar to the 3 footer widgets in the standard Genesis theme, I would like to create 3 widget areas next to each other using the 'genesis_before_content' hook.

I created 3 widget areas and added css-classes for each one, but they are displayed below each other and not next to each other in one line.

How can I display the 3 widgets next to each other (300px each) ?

Here is my example code for widget 1 (the code for 2 and 3 is the same except the numbering):

//* Register before content widget area 1
genesis_register_sidebar( array(
	'id'            => 'before-content-area-1',
	'name'          => __( 'Before Content 1', 'themename' ),
	'description'   => __( 'This is a widget area 1 that can be placed before the content area.', 'themename' ),
) );

//* Hook before content widget area 1
add_action( 'genesis_before_content', 'before_content_widget_1' );
	function before_content_widget_1 () {

			if ( is_front_page())  {
			genesis_widget_area( 'before-content-area-1', array(
			'before' => '<div class="before-content-widget-1">',
			'after' => '</div>',
		) );}

	}

CSS:

.before-content-widget-1 {
	clear: both;
	width: 300px;
	text-align: justify;
	padding: 20px;
	padding: 2rem;
}

[AnitaC]

Please post a link to your site. But, without seeing it - Widgets 1 and 2 would float: left and Widget 3 would float: right. But I can say for sure without seeing what you have.

---

Need help with customization or troubleshooting? Reach out to me.

[Brad Dalton]

This is how i did it http://wpsites.net/web-design/responsive-inline-header-widgets-side-by-side-in-studiopress-themes/

You could also look at a theme like Executive Pro and see how its done as another option however that only generates 1 widget which is populated with 3.

---

Tutorials for StudioPress Themes.

[Author]

Posts