Forums

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.

treehouse : what would you like to learn today?

Forums

Grid of div's without doubling up touching borders