Styling widgets inside footer in WordPress Twenty Twelve Theme

Question

I am using Twenty Twelve Theme of WordPress. I have added three widget columns to the footer, based on this tutorial, which includes all the code you might need to look at.

The only additional css used:

#colophon {
background: url(http://lenkapage.com/daylight/wp-content/uploads/2014/04/footer-logo.png) no-repeat scroll 20px 20px transparent;
background-color: #00A0E1;
color: white;
padding: 115px 0 0 100px;
margin-bottom:20px;
}

Link to site: http://lenkapage.com/daylight

Result is a blue rectangle with logo (as desired) and the widgets are underneath it. I would like the logo and the widgets to form one footer block. How do I get the widgets to be included within the blue background?

An option is to forget the #colophon and style the widgets themselves, this is however not ideal as it's affected unpleasantly when resizing screens, and other issues. Styling didn't work for me.

As the widgets are within #colophon in the code, I played around with positioning (relative etc) but this didn't have the desired effect. My gut feeling is that this is where the answer lies. No cigar so far.

I have searched wordpress.org, google and stack overflow with both few and many search words but mostly get answers on how to implement three widget area on a footer.

Thank you very muchly!

Answer 1

Add overflow to your #colophon. This will work of course, but you can always use clearfix to this elements.

#colophon {
    background: url(http://lenkapage.com/daylight/wp-content/uploads/2014/04/footer-logo.png) no-repeat scroll 20px 20px transparent;
    background-color: #00A0E1;
    color: white;
    padding: 115px 0 0 100px;
    margin-bottom: 20px;
    overflow: hidden;
}