0

I have 160 images I want to align in a grid that takes up the entire 100% width of the web page.

I can not for the life of me figure out how to do this so that the each row stays connected to each other. Could anyone help me out?

enter image description here

This is where I am at for each row. But when I add another row, the rows don't stay together.

<div style="width:100%;height:50px;display:table;">
   <div style="display:table-row;">
        <div style="display:table-cell;width:6.25%;"></div>
        <div style="display:table-cell;width:6.25%;"></div>
        <div style="display:table-cell;width:6.25%;"></div>
        <div style="display:table-cell;width:6.25%;"></div>
        <div style="display:table-cell;width:6.25%;"></div>
        <div style="display:table-cell;width:6.25%;"></div>
        <div style="display:table-cell;width:6.25%;"></div>
        <div style="display:table-cell;width:6.25%;"></div>
        <div style="display:table-cell;width:6.25%;"></div>
        <div style="display:table-cell;width:6.25%;"></div>
        <div style="display:table-cell;width:6.25%;"></div>
        <div style="display:table-cell;width:6.25%;"></div>
        <div style="display:table-cell;width:6.25%;"></div>
        <div style="display:table-cell;width:6.25%;"></div>
        <div style="display:table-cell;width:6.25%;"></div>
        <div style="display:table-cell;width:6.25%;"></div>
   </div>
</div>
bryan
  • 8,879
  • 18
  • 83
  • 166
  • It's because you are going over 100%... You need to split 100% into 160 images... meaning the percent you should be using is .625, not 6.25. Is that the problem? – BuddhistBeast Dec 20 '13 at 23:00
  • @buddhistBeast 6.25*16 is 100% so I'm not going over but that's not the problem. My problem is keeping the rows together. And keeping the height consistent – bryan Dec 20 '13 at 23:06
  • Check this JsFiddle out... As far as I know it should be working just fine. http://jsfiddle.net/9RqY4/2/ Another thing you should do is to make your height much larger or else the rows wont stay current with one another. – BuddhistBeast Dec 20 '13 at 23:10
  • Just curious... Why not use an actual table for this? I know people rag on them all the time, but it is probably the easiest way to align things in a grid like this... http://jsfiddle.net/yvR9W/ – Dryden Long Dec 20 '13 at 23:15
  • Read this... http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – BuddhistBeast Dec 20 '13 at 23:18
  • 1
    @BuddhistBeast While I agree with the link you posted, I feel that it was directed toward layouts that are not a specific grid like OP illustrated above. Also, the majority of the arguments, both for and against tables, are primarily based on opinion. If all OP is trying to accomplish is a 16x10 grid, then I don't see why a table is _that_ big of a sin. :) – Dryden Long Dec 20 '13 at 23:25
  • @DrydenLong is right. The bottom line is that tables are for tabular data - and this is clearly a table ;) – danwild Dec 21 '13 at 06:16

0 Answers0