veiciegaido
New Member
I'm trying to create a grid of divs (without using a table!). What I don't want to happen is any doubling up of borders, it should all be 1px.I've done the following which works great when the grid is full:http://jsfiddle.net/vrLhY/The basis of this is the following css:\[code\].box { width: 33%; float: left; box-sizing: border-box; display:inline-block; border-left:1px solid black; border-top:1px solid black;}.outer { width: 100%; height: auto; line-height: 0; border-right:1px solid black; border-bottom:1px solid black;}\[/code\]But when items are missing (as with the example above) there are some missing borders (bottom of div 6, right of div 8) as would be expected with the solution I have used.Does anyone have a better way of doing this? I don't really want to be adding blank divs but would accept a jQuery solution.