Responsive CSS; image moves to next line rather than shrink - html

Question

I'm trying to make a responsive page for mobiles that will respond when the view-port is extremely small (i.e. small screen in portrait). I have three elements in the header, a 'hamburger' for the menu, the logo/home link and a basket icon. It's important that the user be able to use the menu and basket buttons and I'm trying to get the logo to shrink when the view-port width is too small to accommodate all the content.
At the moment, when the width shrinks the images drop onto the next line, rather than shrink to scale.
Markup:
<header>
<div class="btn-menu">
<a href="" id="menubutton">
<img src="/images/theme/mobile/v3/en/buttons/btn-menu3.png">
</a>
</div>
<div class="btn-home">
<a href="/" class="logo">
<img alt="Home" src="/images/theme/mobile/v3/en/layout/logo-new.png">
</a>
</div>
<div class="btn-basket">
<a href="/basket" id="basketbutton" class="header-button">
<img alt="Basket" src="/images/theme/mobile/v3/en/buttons/btn-basket2.png">
</a>
</div>
</header>
CSS:
header {
position: relative;
text-align: center;
z-index: 10001;
background-color: #fff;
border-bottom: 8px solid #cc0033;
height: 48px;
overflow: hidden;
width: 100%;
}
header div.btn-home > a, img {
height: auto;
max-width: 100%;
}
div.btn-menu {
display: inline-block;
float: left;
width: 48px;
}
div.btn-home {
display: inline-block;
max-width: 199px;
}
div.btn-basket {
width: 60px;
display: inline-block;
float: right;
position:
}
The fixed width on btn-menu and btn-basket are intentional, I don't want them to change, only btn-home needs to respond to the view-port size.
Here's a fiddle to the example. I have added a button with a CSS width transition to simulate the view-port shrinking. In production it should just render to the appropriate size and change when switching between landscape and portrait. The overflow: hidden is disabled to show where the images end up.

Answer 1

I took your code and modified a little. Here is the solution on JSFiddle: http://jsfiddle.net/rmdymm55/
Description:
I added a max height to the header but that's not essential, I just did it out of practice.
I completely removed this:
header div.btn-home > a, img {
height: auto;
max-width: 100%;
}
because I chose to declare it this way:
div.btn-home img {
max-width: 40%;
margin-left: -50px;
}
Both should work but mine is a bit more selective on where its' applied. Only images inside of <div class="btn-home">. Notice how I did margin-left: -50px. That is so when it shrinks, the logo is still centered. The real bag of tricks though is where the Home button is. You have to do the following on .btn-home img:
display: inline; /* This will keep it in one line */
width: auto; /* for resizing */
height: auto; /* for resizing */
position: relative; /* to keep it in place */
For the div.btn-basket you must add:
position: absolute;
and on div.btn-menu you have to add:
position: relative;
This will position the images properly so they don't overlap, move seamlessly and wont go onto the next line.