Responsive top-banner image that's devided by 3 divs

I'm trying to create a top-banner-ad that resembles a takeover. It contains a total of 3 divs. Left, right and a center. I'm wondering how I can make these 3 images scale proportionally so that the images don't break when resizing the window.

Right now, my right banner div seems to be pushed right under the center div when resizing the window so it isn't responsive.

*Note: I've replaced the images with background-color. Here's an example of what I want to achieve: http://fandango.no/wp-content/uploads/2015/09/1412_hestesko_cruise_ncl_skisse02.jpg

 <style>
  * body, html{
    margin: 0;
    padding: 0;
  }
  .left-banner{
    background-color:lightgreen;
    background-repeat: no-repeat;
    width:100%;
    height:700px;
    max-width:180px;
    float: left;

  }
  .right-banner{
    background-color:lightgreen;
    background-repeat: no-repeat;
    width:100%;
    height:700px;
    max-width:180px;
    float:left;
  }
  .center-banner{
    background-color:lightblue;
    background-repeat: no-repeat;
    width:100%;
    max-width:1010px;
    height:150px;
    float:left;
  }
  .banner-container{
    width:100%;
    height:100%;
  }
</style>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>TEST</title>
    <meta name="description" content="X">
    <meta name="author" content="X">
  </head>
  
  <body>
    <div class="banner-container">
      <div class="left-banner"></div>
      <div class="center-banner"></div>
      <div class="right-banner"></div>
    </div>
  </body>
</html>

Thanks

I managed to get this done thanks to the answer below. The center banner is now fluid, while keeping the left and right banner the same width.

.left-banner{
    background-color: lightgreen;
    background-repeat: no-repeat;
    height:700px;
    flex: 0 0 180px;
  }
  .right-banner{
    background-color: lightgreen;
    background-repeat: no-repeat;
    height:700px;
    flex: 0 0 180px;
  }
  .center-banner{
    background-color: lightblue;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    max-width:1010px;
    height:150px;
    flex: 0 1 100%;
  }
  .banner-container{
    width:100%;
    height:100%;
    display: flex;
    flex-wrap:nowrap;
  }

<html> 
  <body>
    <div class="banner-container">
      <div class="left-banner"></div>
      <div class="center-banner"></div>
      <div class="right-banner"></div>
    </div>
  </body>
</html>

Solution

You could do this with using flexbox.

* body,
html {
  margin: 0;
  padding: 0;
}
.left-banner {
  background-color: lightgreen;
  background-repeat: no-repeat;
  flex: 0 1 180px;
  height: 700px;
}
.right-banner {
  background-color: lightgreen;
  background-repeat: no-repeat;
  flex: 0 1 180px;
  height: 700px;
}
.center-banner {
  background-color: lightblue;
  background-repeat: no-repeat;
  flex: 0 1 100%;
  height: 150px;
  max-width: 1010px;
}
.banner-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap:
}

<div class="banner-container">
  <div class="left-banner"></div>
  <div class="center-banner"></div>
  <div class="right-banner"></div>
</div>

Basically you set flex: 0 1 180px; to the right and left banners to say "do not grow, you can shrink, you should try to be 180px wide". And the center banner should fill in the rest.

Browser support for flexbox: http://caniuse.com/#search=flexbox