2 images or divs next to eachother - css

Question

I'm busy with my first attempt to responsive webdesign and i'm trying to put 2 images next to eachother. When I view the website on a desktop computer the page layout is just fine. But when i'm viewing it on a mobile (or I resize the window) the 2 images at the bottom are not inline anymore and jump on top of eachother.
Any idea how to solve this?
The page is on this test host: www.igga.nl.
Here's my markup:
#media screen and (max-width: 568px) {
#footer {
position: fixed;
left:0px;
bottom:0px;
height: 110px;
border-top: 7px solid #fff;
background-image: url('../images/bg_footer.png');
background-repeat: repeat;
width: 100%;
}
#pos {
width: 100%; /* parent */
}
#footer-info {
width: 100%;
float: left;
}
#centerpos {
width: 94%;
margin: 0 auto;
}
.tree {
float: left;
margin: 10px 1.76056338028169% 0 0;
width: 6.69014084507042%; /* 427 / 960 */
}
.logo-cont {
border-bottom: 0;
}
.logo {
margin-top: 18px;
width: 91.54929577464789%;
border-bottom: 1px solid #000;
padding-bottom: 2px;
}
.info-cont {
clear: both;
width: 100%;
margin: 2px 0 0 8.45070422535211%;
}
.info {
margin: 3px 0 0 0;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
font-size: 0.875em;
}
.info a {
display: inline;
text-transform: lowercase;
text-decoration: none;
color: #000;
}
.info-telnr {
margin: 3px 0 0 0;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
font-size: 0.875em;
}
.info-telnr h5 {
display: inline;
text-transform: lowercase;
text-decoration: none;
letter-spacing: 1px;
color: #000;
font-size: 1em;
}
}
and this is my HTML:
<div id="footer">
<div id="pos">
<div id="footer-info">
<div id="centerpos">
<img class="tree" src="sites/all/themes/md/images/logo_tree.png">
<div class="logo-cont">
<?php if ($logo): ?>
<a href="<?php print $front_page; ?>" title="<?php print t('MD | Illustration & Design'); ?>" rel="home" id="home">
<img class="logo" src="<?php print $logo; ?>" alt="<?php print t('MD | Illustration & Design'); ?>" />
</a>
<?php endif; ?>
</div>
<div class="info-cont">
<div class="info">
mail info#example.nl
</div>
<div class="info-telnr">
phone <h5>[phone]</h5>
</div>
<div class="info">
shop www.thepossiblemachine.nl</p>
</div>
</div>
</div>
</div>
</div>

Answer 1

Try to set float:left for both divs/images. It helps in many cases but I can't tell if it will be useful in your problem without the code. It should look something like:
<div id="image1" style="float:left">
<img src="images/yourimage1" alt=""/>
</div>
<div id="image2" style="float:left">
<img src="images/yourimage2" alt=""/>
</div>
I hope this helps.