Positioning image in grid

[neomagic]

I’m struggling to place the large image (bottom right) properly into the table. It keeps floating around outside :-(

http://jsfiddle.net/XBz39/59/

[neomagic]

Hey Wolfie,

Obviously my brand of magic fails me when it comes to CSS :-)

Gotta say I’m impressed with what you did but I also don’t understand it. I can see you made an unordered list, by how do you make the images turn to the new row after some time? Just by defining the total width? And why does the wide image come as the fifth from the bottom.

What I want to achieve is this: http://imgur.com/a/6UJUV
using these sample images: http://imgur.com/a/ztXuZ

A five by four tiled layout, where I have some flexibilty with different tile size combinations. The width must be 735px and the space between images exactly 5px (no margin on the outside). So i’m not so sure how to apply what you showed me to that end.

I just thought a table with white rows and columns inbetween would be easiest :-p

[neomagic]

I may not know CSS but I know trial and error. Thanks to your explanation and your recommendation I managed to do this:

*http://codepen.io/anon/pen/Kntio

I am thus enjoying pride and gratitude in equal measures :-)

Only thing that doesn’t seem perfect is the way the page loads. It seems to construct visibly.

Anyway thanks a bunch!!!

[Author]

Posts