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.

First is support, as I have to optimize this for IE7.
Second is how it displays the images (top to bottom instead left to right).
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....

score 0 · Answer 1 · answered Nov 28 '14 at 09:30

0

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

answered Nov 28 '14 at 09:30

Amila

3,711
3
26
42

This is not responsive.... Read my question again pls, and check code I provided. I want those images/divs to change sizes when broser window get smaller, and not to drop to next line. Ps.: I don't want to use floats. – MiChAeLoKGB Nov 28 '14 at 09:31
well, changing the width to 100% in the .main class will give you responsiveness. http://jsfiddle.net/wrL0w8qh/2/ – Amila Nov 28 '14 at 09:33
You obviously did not read my question properly. I DONT want them to drop to new line. I want those divs/images in line to change their width. Please, check this code: http://jsfiddle.net/xabxt3re/1/ – MiChAeLoKGB Nov 28 '14 at 09:34
for that you'll have to use media queries – Amila Nov 28 '14 at 09:35
I would ahve to use milion of them for every pixel. Cant afford that. Is there no other way than column-count? – MiChAeLoKGB Nov 28 '14 at 09:36
you'll have to use a jquery solution. You'll first have to get the width of the container (e.g div with .newspaper class) and divide that by the items you have and set the width of a item manually. I'll see if I can write a jsfiddle for that – Amila Nov 28 '14 at 09:43
I don't want jQuery or JS solution for it. Thats why I opted for CSS column-count at first place. I tried white-space: nowrap, but that did not help anything. So there is basically no way to do it? – MiChAeLoKGB Nov 28 '14 at 09:44
Sorry, not that I can think of – Amila Nov 28 '14 at 09:49
Ok. So looks like I'm just screwed. Cant believe there is no such optin instead of column-count which is dodgy and buggy. Anyway, thanks. – MiChAeLoKGB Nov 28 '14 at 09:57

MiChAeLoKGB · Accepted Answer · 2014-11-29T02:44:10.430

Ok,

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

My lile

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);
});

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

2 Answers2