Arrange two divs inline in footer

Question

I have this site:

http://eventos.dac-proiect.ro/

I want to fix these two div sites so as to be in line as in the picture below

http://i58.tinypic.com/2n8ucuu.jpg

This is the HTML code:

<footer id="colophon" class="site-footer" role="contentinfo">


            <div class="social-list">

                   <ul>
                      <li><img src="http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/gri1.png" alt="Smiley face" height="30" width="30"></li>
                      <li><img src="http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/gri2.png" alt="Smiley face" height="30" width="30"></li>
                      <li><img src="http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/gri3.png" alt="Smiley face" height="30" width="30"></li>
                      <li><img src="http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/gri4.png" alt="Smiley face" height="30" width="30"></li>
                       <li><img src="http://eventos.dac-proiect.ro/wp-content/themes/eventos/images/gri5.png" alt="Smiley face" height="30" width="30"></li>

                   </ul>

            </div>


    <div class="site-info">


        <?php printf( __( ' © 2015 %1$s %2$s.', 'eventos' ), 'EVENTOS.', 'Toate drepturile rezervate' ); ?>


    </div><!-- .site-info -->
</footer><!-- #colophon -->

I tried to put display: inline-block div at the two sites, but unfortunately does not work ... and do not understand why

Can you please help me solve this problem?

Thanks in advance!

Answer 1

Put float:left on both of your div's and get rid of the inline-block

Answer 2

footer#colophon > div {
    display: inline-block; /* allow block-level elements to reside on the same line */
    width: 50%;
    box-sizing: border-box; /* make borders and padding part of dimensions */
    font-size: 0; /* eliminate remaining whitespace between */
}

More on dealing with the whitespace niggle