I'm trying to lay out my top banner without using a table. At this point, it looks fine until you start to minimize the size of the browser window. I'd like it to behave the same way it would if it were in a table -- it collapses until it reaches the minimum size of the background images used, then the right margin just disappears off the screen, with the remaining banner looking the same. Now as you narrow the screen, the banner breaks apart into two segments, one on top of the other.

Here's the page:

http://www.rosscustomleather.com/tem.../template.html

Here's the css I've got so far pertaining to the banner:

body {
background-color: #3d271c;
margin: 10px;
padding: 0px;
}

#wrapper {
width: 95%;
margin-right: auto;
margin-left: auto;

}

.banner {
width: 100%;
background-image: url(images/filler.png);
background-repeat: repeat;

}

.floral {
background-image: url(images/floral.png);
background-repeat: no-repeat;
height: 165px;
float: left;
width: 320px;

}

.title {
margin-right: auto;
margin-left: auto;

}

.horses {
background-image: url(images/horses.png);
height: 165px;
width: 344px;
background-repeat: no-repeat;
float: right;

}