HTML CSS Header images not floating correctly - html

Question

Afternoon all,
I'm trying to create a basic header
White space at top with an image that floats left and an image that floats right.
Then below this a grey background with some options and a button on left and some nav buttons on right.
The requirements are that the header will always be 100% width and that when you scroll down the page the header always stays at the top.
I have this working fine with my current HTML and CSS however when I reduce screen size e.g. snap right on my laptop 1368x768 resolution on laptop the image on the right floats below the buttons on the right hand side but inside the grey border?!
Left image size = 480x80
Right image size = 264x80
HTML
<div id="banner">
<img src="/images/img1.png" style="float:left"/>
<img src="/images/img2.png" style="float:right"/>
</div>
<div id="header">
<div id="header_left">
<form action= "<?php echo $_SERVER['PHP_SELF']; ?>" method ="POST">
<select name=dbselector>
<?php
echo '<option value="1"';
if ($_COOKIE[$cookie] == "x") {
echo ' selected="selected"';}
echo '>1</option>';
echo '<option value="2"';
if ($_COOKIE[$cookie] == "y")
{echo ' selected="selected"';}
echo '>2</option>';
?>
</select>
<input name="submit_button" type="submit" value="Submit"/>
</form>
</div>
<div id="header_right">
<?php date_default_timezone_set('Europe/London'); echo date('h:i:s');?>
<input type="button" value="Back" onclick="history.go(-1)">
<a href="www.google.co.uk" style="text-decoration: none">
<input type="button" value="Home">
</a>
<input type="button" value="Refresh" onClick="history.go(0)" >
<input type="button" value="Forward" onclick="history.go(1)">
</div>
</div>
CSS
#header
{
width: 100%;
position: fixed;
background:#58575b;
padding-top: 0px;
padding-bottom:0.5em;
margin: 0px
}
#banner
{
background:#fff;
width:100%;
height: 5em;
}
#header_left
{
float: left;
padding: 0em;
padding-left: 0.5em;
margin: 0em;
}
#header_right
{
float: right;
padding: 0em;
margin: 0em;
padding-right: 0.5em;
}
Any ideas why it is behaving like this?!
Thanks in advance

Answer 1

In a few comments of the starting post you say something about it not working properly in Internet explorer or Firefox.
It works in chrome right?
So it may be such a thing something isn't compatible with firefox or IE.
Not many use IE for the fact it is decommissioned by microsoft.
So, now let's focus just on Firefox and smaller screens as that also seems to be a issue.
Solution for small screens: Use viewports or media queries (either or should fix it)
<meta name="viewport" content="width=device-width, initial-scale=1">
For the issues with FireFox can you explain what it does? You just mention the issue for small screens exactly what it is doing but didn't explain the issues with Firefox (IE)
Thanks!

Answer 2

Solution was very basic...
The only thing different between the jsfiddle and my live code were the images.
I have checked the images and they have loads of whitespace in them hence why it moves down!
Took the images straight of our corporate site so I didn't even both to check for whitespace in the image itself.....
Argh!