WordPress footer with 3 widget areas

footer.php

<footer>
	<?php
	// Check if the widget areas are populated - if no area is populated, nothing will be displayed
	if(! is_active_sidebar('footer-widget-1')
		&& ! is_active_sidebar('footer-widget-2')
		&& ! is_active_sidebar('footer-widget-3')
		)
	return;
	
	// Check if all the widget areas are populated and display them all - if not, don't display anything
	if(is_active_sidebar('footer-widget-1')
		&& is_active_sidebar('footer-widget-2')
		&& is_active_sidebar('footer-widget-3')
		) : ?>
		
	<aside class="fatfooter" role="complementary">
		<div class="first one-third left widget-area">
			<?php dynamic_sidebar('footer-widget-1'); ?>
		</div><!--first widget area-->
		
		<div class="second one-third widget-area">
			<?php dynamic_sidebar('footer-widget-2'); ?>
		</div><!--second widget area-->
		
		<div class="third one-third right widget-area">
			<?php dynamic_sidebar('footer-widget-3'); ?>
		</div><!--third widget area-->
	</aside><!--fatfooter-->
	
	<?php
	// Check if 1st & 2nd widget areas are populated and display them - if not, don't display anything
	elseif(is_active_sidebar('footer-widget-1')
		&& is_active_sidebar('footer-widget-2')
		&& ! is_active_sidebar('footer-widget-3')
		) : ?>
	<aside class="fatfooter" role="complementary">
		<div class="first half left widget-area">
			<?php dynamic_sidebar('footer-widget-1'); ?>
		</div><!--first widget area-->
		
		<div class="second half right widget-area">
			<?php dynamic_sidebar('footer-widget-2'); ?>
		</div><!--second widget area-->
	</aside><!--fatfooter-->
	
	<?php
	// Check if 1st & 3nd widget areas are populated and display them - if not, don't display anything
	elseif(is_active_sidebar('footer-widget-1')
		&& ! is_active_sidebar('footer-widget-2')
		&& is_active_sidebar('footer-widget-3')
		) : ?>
	<aside class="fatfooter" role="complementary">
		<div class="first half left widget-area">
			<?php dynamic_sidebar('footer-widget-1'); ?>
		</div><!--first widget area-->
		
		<div class="third half right widget-area">
			<?php dynamic_sidebar('footer-widget-3'); ?>
		</div><!--second widget area-->
	</aside><!--fatfooter-->
	
	<?php
	// Check if 1st widget areas is populated and display them - if not, don't display anything
	elseif(is_active_sidebar('footer-widget-1')
		&& ! is_active_sidebar('footer-widget-2')
		&& ! is_active_sidebar('footer-widget-3')
		) : ?>
	<aside class="fatfooter" role="complementary">
		<div class="first full-width widget-area">
			<?php dynamic_sidebar('footer-widget-1'); ?>
		</div><!--first widget area-->
		
	</aside><!--fatfooter-->
	
	<?php
	// end of widget area check
	endif;?>
</footer>

functions.php

function widgets_init(){
	
	// First footer widget
	register_sidebar(array(
		'name' => 'Footer widget 1',
		'id' => 'footer-widget-1',
		'description' => 'The first footer widger area',
		'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	));
	
	// Second footer widget
	register_sidebar(array(
		'name' => 'Footer widget 2',
		'id' => 'footer-widget-2',
		'description' => 'The second footer widget area',
		'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	));
	
	// Third footer widget
	register_sidebar(array(
		'name' => 'Footer widget 3',
		'id' => 'footer-widget-3',
		'description' => 'The third footer widget area',
		'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
		'after_title' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	));
}

style.css

/* centering */
.fatfooter{text-align:center;}
/* floating */
.one-third, .half {
	float:left;
}

/* sizing */
.one-third{
	width:32%;
}
.half{
	width:48%;
}

/* margining */
.one-third{
	margin:0 0.5%;
}
.left, .one-third.left{
	margin:0 1% 0 0;
	float:left;
}
.right, .one-third.right{
	margin:0 0 0 1%;
	float:right;
}
.half.left{
	width:48%;
	margin:0 2% 0 0;
}
.half.right{
	width:48%;
	margin:0 0 0 2%;
}

/* media queries for small screens in landscape mode (or similar) */
@media screen and ( max-width: 600px ) {
     
    /* width sizing all full width in small screens */
    .one-third,
    .half,
    .full-width {
        width:100%;
        margin:0;
    }
    /* padding adjustments */
    .widget-area {
        padding:0 0 10px 0;
    }
}