3 divs in a line, responsive (change divs size instead of dropping to new line)

Question

I want to have 3 divs/images (admin has divs, result page has images) in one line, there are 8 of them or more/less (its dynamic).

I used column-count and well, it worked OK, but I have couple problems with it.

1. First is support, as I have to optimize this for IE7.
2. Second is how it displays the images (top to bottom instead left to right).
3. Third one is problems when you have 4, 7, 10, 13, 16 etc. images.

I don't want to use floats. Is there any way to have it responsive? So basically, div with max size of XXXpx and that it will resize instead of just dropping to other line when resizing the page?

...

http://jsfiddle.net/xabxt3re/1/

Sometimes it wont let you resize the right side, just close the page and open it again. Should work. Weird JSFiddle problems. Also after you click there, it adds new image at the end, so you can observe the behavior I want to avoid.

So basically, is there some way, to have 3 divs/images in one line, so they would resize if browser windows is not wide enough, instead dropping to another line? Or fixing the order in which column-count is showing images and how its filling first two columns with 2 images and not spreading it equally?

Ps.: If somebody down votes my question, could you at least tell me why? So I can improve it and learn for next time? As it's really annoying. I provided all the details and even a code of what I have.

Thanks for edit suggestion. I added space after link, but I forgot you have to add 2 spaces to create one....

Answer 1

Ok,

so after all the options I tried, I had to agree with this:

I had to switch to tables and it works... How surprising.

So here is the whole code even with JS for adding new stuff in it.

http://jsfiddle.net/xabxt3re/6/

HTML

<table class='table'><tr>
    <td><img src="https://www.hojko.com/download/file.php?avatar=34394_1376421397.png"/></td>
    <td><img src="https://www.hojko.com/download/file.php?avatar=6028_1325191688.gif"/></td>
    <td><img src="https://www.hojko.com/images/avatars/gallery/baby/baby167.jpg"/></td>
    </tr><tr>
    <td><img src="https://www.hojko.com/download/file.php?avatar=34394_1376421397.png"/></td>
    <td><img src="https://www.hojko.com/download/file.php?avatar=6028_1325191688.gif"/></td>
    <td><img src="https://www.hojko.com/images/avatars/gallery/baby/baby167.jpg"/></td>
    </tr><tr>
    <td><img src="https://www.hojko.com/download/file.php?avatar=34394_1376421397.png"/></td>
    <td><img src="https://www.hojko.com/download/file.php?avatar=6028_1325191688.gif"/></td>
    <td><img src="https://www.hojko.com/images/avatars/gallery/baby/baby167.jpg"/></td>
</tr></table>

CSS

.table{
    max-width: 320px;
    margin: 0 auto;    
}
img {
    max-width: 100%;
    height: auto;
}

JS

var NewContent2 = "<td><img src='https://www.hojko.com/download/file.php?avatar=5439_1294832739.jpg'></td>";
$(".table").click(function () {
    $page = $(this).children("tbody");
    if ($(this).find("td").length % 3 == 0){
        $page.append("</tr><tr>");
    }
    $page.append(NewContent2);
});

Answer 2

Please take a look at this jsfiddle Demo. It should work down until IE8. For IE7 please take a look at this blog post. http://uncorkedstudios.com/blog/how-to-fix-the-ie7-and-inlineblock-css-bug

try changing the width of the .main class in the jsfiddle