Grid of div’s without doubling up touching borders

[notfilc]

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:

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

The width may not always be 33% – it may be 25% or even 10% sometimes so a css table solution here probably won’t work either.

[Paulie_D]

I think javascript will be your answer but if you KNOW how may divs will be across you can do things with pseudo classes..

http://codepen.io/anon/pen/qiLHj

[Senff]

Not sure if this would cover all possible situations, but you might want to switch it around and give the outer box a top/left border and each individual div a bottom/right border: http://jsfiddle.net/senff/vrLhY/41/

If you also need a border at the bottom right (where there’s a DIV “missing”) then you can give the outer box also a bottom right border and then work with some negative margins.

[notfilc]

That looks perfect Senff – thanks a bunch. I won’t mark this as solved yet as I would be interested to see any other methods but that looks awesome.

[wolfcry911]

Here’s a pen similar with a different technique:

http://codepen.io/wolfcry911/pen/zAyFw

edit// for what it’s worth, it can be adapted to full width container and percentage children

[notfilc]

Thanks – looks like a nice solution too but Senff’s is probably a bit more old browser friendly.

[wolfcry911]

Obviously you’re free to choose any method you like, but tell me how border-box box sizing and inline-block are more friendly to older browsers than negative margins?

[Merri]

Quickie: http://codepen.io/Merri/pen/KgBDE

[Senff]

@wolfcry : negative margins have more (older) browser support than border-box I think? My original solution doesn’t involve either, though! :)

[Merri]

This feels so wrong, but it works: http://codepen.io/Merri/pen/ptwcg

Browser limitations…

– IE8: no inner borders. I take it IE8 places them incorrectly somewhere it shouldn’t place them.
– IE7: no inner borders, percentages for widths are no good (unless you round them down yourself).
– IE6: same as IE7.

I guess it is likely to expect mobile browsers to get this wrong.

**Edit!**

Improved further: now row height kind of inherits to each cell in the row.

[notfilc]

This is awesome guys – I haven’t had a chance to fully look through all of these yet but certainly keep them coming – maybe a good article for the blog I’m launching soon. I’ll drop a better reply in here tomorrow.

[Author]

Posts