Make fixed size <div> be scalable in fluid layout - css

Question

I'm seasoned webdesigner, so I don't know much about this art.
I got three elements placed horizontally (left/center/right) which have fixed size:
.banner-box {
position: relative;
display: inline-block;
width: 300px;
height: 400px;
margin: 0 auto;
}
and inside every div there are few images, that are centered horizontally and general style for img is:
img {
max-width: 100%;
}
to make them fluid.
But since divs are not flexible, images inside them also won't change their size when resizing browser window.
Is it possible to set fixed size on any html element and still somehow make it fluid?
I know I could use percentages instead pixels, but I've got also problems with setting proper height for .banner-box using percents - box doesn't stretches to desired 400px, only to 281px.
Here's html:
<div id="footer">
<img src="footer-line.png" alt="Footer.png" />
<p><span>some span</span> blah</p>
<p>mail: <span>mail#domain.com</span></p>
</div>
And whole css for my simple webpage:
html {
background: url('mu-media-background-1920.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
}
img {
max-width: 100%;
}
#container {
width: 1200px;
margin: 5% auto;
text-align: center;
}
#header {
display: block;
clear: both;
position: relative;
width: 100%;
margin: 0 auto;
}
#content {
display: block;
width: 95%;
height: auto;
margin: 10% auto 5% auto;
}
.banner-box {
position: relative;
display: inline-block;
width: 300px;
height: 400px;
margin: 0 auto;
}
.banner-text {
position: relative;
display: block;
top: 7%;
margin: 0 auto;
}
.see-more-button {
position: absolute;
display: block;
margin: 0 auto;
left: 0; right: 0; bottom: 0;
}
#virtual-studio {
float: left;
}
#mu-animation {
float: right;
}
#shadows {
display: block;
clear: both;
position: relative;
width: 100%;
}
#shadows img {
display: block;
clear: both;
position: relative;
margin: 0 auto;
}
#footer {
display: block;
clear: both;
width: 95%;
margin: 0 auto;
font: 15px Arial, Helvetica, sans-serif;
}
#footer p {
display: table;
clear: both;
position: relative;
margin: 0 auto;
color: #AFBEA5;
text-align: center;
width: auto;
}
#footer span {
font-weight: bold;
color: #BDC9AF;
}
I'm preparing responsive layout, so it would be best (afaik) to use only percentages.

Answer 1

Here is a good hybrid approach that has worked well for me in the past.
As you've already mentioned you could use percentage widths to build a fluid layout, and then restrict/fix specific div sizes with max and min values. So for example:
#container {
width: 100%;
max-width: 1200px;
}
Here is a working example with the banner boxes restricted to max 300px width and min 400px height (I added some padding and borders so you can see what is going on): jsfiddle
In the end you'd still have to adjust your responsive media queries to deal with your fixed elements, but this way you'd only have to change a few min and max values.

Answer 2

You will need to use media queries and define fixed widths/heights for .banner-box for each screen break point that you choose.
You'll have to play with the sizing and see which sizes fit best for which break points.