Positioning two elements beside each other, floating will make img disappear - css

Question

I'm new to design and I need to place the two imgs beside each other, with some space between.
This is what currently my site looks: Dont worry about the cut off, it is suppose to be like that. I need to prepare this to allow me to later on add responsive elements on to it so I cannot use absolute positions or anything that will lock the image into place.
Both Images are the same height at 125 px. When I float both the pictures left or right, the pictures appear 95% cut off at the edges of my webpage. I dont understand why it's being place underneath each other, there seems to be plenty of room for the second image to be on the same level.
Heres what I have so far: "navi" is my container or wrapper... mainlogo and slidertop i used to experiment and currently have no code under each.
<div id="navi">
<div id="mainlogo"><header></header></div>
<div id="slidertop"><header id="topad"></header></div>
<div style="clear:both"></div>
</div>
#navi{
height: 130px;
}
#mainlogo{
}
#slidertop{
}
This is how Im calling my images:
header{
background: url(../Images/logo1.gif) no-repeat 15% 0px;
border: none;
height: 125px;
top:100px;
}
header#topad{
background: url(../Images/TopAd.gif) no-repeat 80% 0px;
border: none;
height: 125px;
vertical-align: middle;
}

Answer 1

In the original code you posted, I think the divs are all 100% of the available width, and they will appear on top of each other on the page. You can see this for yourself if you temporarily add a coloured border around each div so you can see where they are.
If you want them side by side, you have to add styles to accomplish this. For example, you could float them and specify the widths:
header { width: 45%; float: left; }
header#topad { float: right;}
E.g.: http://codepen.io/anon/pen/ynuoa

Answer 2

Have you tried floating the divs?
#mainlogo{
float: left;
}
#slidertop{
float: left;
}