CSS Styling fort Fluid Width - html

Question

My site here is fluid width, but the middle header section with the search bar and image doesn't resize correctly in either IE, Chrome or FF.
I've tried using media screen stylesheets for lower screen resolutions, but this just causes there to be a gap to the right of the right-hand image in some browsers where they display the width differently.
If anyone could possibly take a look and see it at different resolutions and browsers that would be great, and perhaps help with any suggestions.
Currently in IE9, when it's reduced slightly under 1263px (approx 1250px), the image jumps down entirely and looks awful.
Here's the CSS:
/*Town Image */
#town-image-search {
box-shadow:0 5px 5px #CCC;
background:0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa',endColorstr='#e4e4e4');
border-top:1px solid #D6D2D5;
border-bottom:#d1d1d1;
}
#search-bar {
float:left;
width:16.5%;
padding:8px 15px;
}
input#search {
width:100%;
height:22px;
color:#aaa;
text-indent:10px;
border:1px solid #d6d6d6;
font-size:14px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
margin:0 0 6px;
padding:0;
}
input#submit {
width:100%;
border:1px solid #666;
height:22px;
color:#fff;
text-shadow:0 1px 0 #555;
background-color:#803C6D;
font-family:'Arial Rounded MT Bold';
cursor:pointer;
-webkit-border-top-right-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
padding:0;
}
#middle-top {
height:68px;
float:left;
width:81%;
border-left:1px solid #Fafafa;
}
#town-name {
word-spacing:5px;
position:relative;
z-index:0;
float:left;
font-family:'arial rounded mt bold';
font-size:36px;
color:#354057;
line-height:69px;
text-indent:27px;
letter-spacing:-3px;
}
#town-name span {
font-family:'arial rounded mt bold';
color:#354057;
}
img#heart {
float:right;
width:230px;
height:68px;
position:relative;
z-index:10;
margin-right:-120px;
}
img#town-image {
width:404px;
height:68px;
float:right;
}
Any ideas would be much appreciated.

Answer 1

#middle-top a float:right and changed the width to 80%