Evenly space images in div using percentages

Question

I need to space four images aligned horizontally evenly in a row. I am aware that this has been asked many times here, yet none of the solutions I found have worked for me. They all seem to rely on either a fixed width for the row, or a fixed width for the images. I need to specify both in percentages.

My Html:

<div id="tabBar">

                <div id="PDiv">
                    <img id="Person" src="images/icons/tabBar/image0.png">
                </div>
                <div id="SDiv">
                    <img id="Sale" src="images/icons/tabBar/image1.png">
                </div>
                <div id="CtDiv">
                    <img id="Current" src="images/icons/tabBar/image2.png">
                </div>
                <div id="FDiv">
                    <img id="Food" src="images/icons/tabBar/image3.png">
                </div>
                <span id="Stretch"></span>
            </div>

The CSS

#tabBar
{
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #F3F3F3;
    width: 100%;
    text-align: justify;

}
#PDiv, #SDiv, #CDiv, #FDiv
{
    background-color: #F3F3F3;
    width: 24%;
    vertical-align: top;
    height: auto;
    display: inline-block;
}
#Stretch
{
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

The issue with this method is that I am building a mobile hybrid app. Therefore, it will have to work on many screen sizes. Currently it looks great on larger screens and computers, but on phones with smaller-sized screens, either the images begin to get cut off, or one of them goes and makes a new line. Instead, I need the images to just scale down and stay evenly spaced.

Answer 1

Have you tried scaling your images with CSS, like so:

img {
  width: 100%;
  height: auto;
}

This will prevent you images of creating new lines, or being cut off.

EDIT:

jsfiddle link: http://jsfiddle.net/ATube/