customize footer widgets area

Question

I have a custom footer widgets area which is displaying a maximum of 4 widgets horizontally in one row. If I add more than 4 widgets then the layout breaks because is trying to display it in the same row.

I want to make it more flexible, for example to have 2 rows (divs) where I can add on the first one let's 2 widgets, and in the second one 4 widgets.

Probably what I need is to duplicate this one and make two footer areas. Is this possible and if it is how can I achieve this?

Here is the actual code of my widgets.php :

    /* Footer Widgets */
$footer_widgets_num = wp_get_sidebars_widgets();
$footer_widgets_num = (isset($footer_widgets_num['footer-widgets'])) ? count( $footer_widgets_num['footer-widgets']) : 0;

switch ($footer_widgets_num) {
    case 1:
        $footer_widgets_num = '12';
    break;
    case 2:
        $footer_widgets_num = '6';
    break;
    case 3:
        $footer_widgets_num = '4';
    break;
    case 4:
        $footer_widgets_num = '3';
    break;
    case 5:
        $footer_widgets_num = '2 offset1';
    break;
    case 6:
        $footer_widgets_num = '2';
    break;
    case 7:
        $footer_widgets_num = '1';
    break;
    case 8:
        $footer_widgets_num = '1 offset2';
    break;
    case 11:
        $footer_widgets_num = '1';
    break;
    case 12:
        $footer_widgets_num = '1';
    break;
    default:
        $footer_widgets_num = '1';
    break;
}

register_sidebar(array(
   'name' => __('Footer Widgets','outbox' ),
   'id'   => 'footer-widgets',
    'description'   => __( 'There are 4 slots available in the footer','outbox' ),
    'before_widget' => '<div id="%1$s" class="span'.$footer_widgets_num.' %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h3 class="widget-head">',
    'after_title'   => '</h3>'
));
  }

Answer 1

CSS is a better way to go. Use a different class for the first two widgets than those that follow, so you can position them each where you want them.

Float, width, and possibly min / max-width should be all you need to get this working. If every widget is floating left, and the first two widgets are set to width 50%, the other widgets will move below, so long as the container div has a set width.