Equidistantly spaced divs with percentages for responsive design

Question

Working example and JS Fiddle

Trying to come up with a solution for this that creates a ul li list that displays items spaced apart equidistantly, but using percentages.

The solution needs to be able to work responsively, that is the blocks (images with text overlayed) would reduce in both size, and the space between them down to an iPad size. At typical mobile phone resolution, they would stack.

There are three elements, but the advantage of using percentages would be that an extra one could be added without having to redo much of the CSS. Hopefully the blocks (in this case li items) would just adjust their sizes and spaces accordingly.

I tried having a play with some equidistant CSS tricks over here but they aren't really suitable for responsive.

I plan to use max-width:100% to make the images resize to the max width of the current li so that larger images can be used without the need for resizing (saves time when swapping images around and means that the same image can be used elsewhere on the site)

li list doesn't need to be used, would be open to using a simple div or span structure.

Any ideas?

First issue: In my JS Fiddle example you can see that the images align and resize based on the window size. However the farthest right element isn't flush with the right edge (they're all typically left aligned). Though I have added text-align:justify it doesn't seem to be having the affect desired

Second issue: Three being non divideable evenly is a problem. 30% isn't a true third, and 33% seems to push it out.

Third issue: Whitespace. Is there a way to stop the evil whitespace between li's that are placed on different lines? Must I sacrifice readable HTML to get rid of the whitespace?

HTML:

<div id="bottomWide">
    <ul>
    <li><img src="#" alt="text"></li>
    <li><img src="#" alt="text"></li>
    <li><img src="#" alt="text"></li>
    </ul>
</div>

CSS:

bottomWide{

width:85%;
margin:0 auto;
border:1px solid red;}

bottomWide ul{

margin:0;
padding:0;

}

bottomWide li{

list-style-type: none;
display: inline-block;
width:30%;
text-align:justify;

}

bottomWide img{

max-width:100%;

}

Media Query for stacking (works well)

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {
/* Styles */
    #bottomWide li{
    display:block;
    width:100%;
}
}

Answer 1

This is one way:

http://jsfiddle.net/YT3KZ/3/

I changed the li to float:left; rather than display:inline-block; and added a margin-left: 1%; and made the width 32.333% to compensate for the 1% margin and spread it across the div.

This will position li's with a 1% margin on the left and cut off 1% on the right so you need to counter that with a negative margin on the ul or you could add a positional class to do this.

margin-left:-1%;

Another way to do it is to make the container wider than your page width so they position properly and use a negative margin/padding to compensate the part which would be cut off.

PS. just noticed you didn't want a gap.. remove the 1% margin and change it the li to 33.333%

http://jsfiddle.net/YT3KZ/7/

Note: I haven't removed the css that is not required. E.g. text-align:justify; so you can clean it up.