Grid of div's with touching borders - stop doubling up

Question

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.

edit: 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.

I would use a ``. There are not [that](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) evil — Benjamin Crouzier, Mar 17 '13 at 20:25
I can't really do that as the amount of columns will be dynamic - width of inner boxes may be 25% sometimes (e.g. 4 columns) or even 10% (10 columns). — user319940, Mar 17 '13 at 20:44

score 3 · Accepted Answer · answered Mar 18 '13 at 12:25

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:

.box {
    width: 33%;
    float: left;
    box-sizing: border-box;
    display:inline-block;           
    border-right:1px solid black;
    border-bottom:1px solid black;
}

.outer {
    width: 100%;
    height: auto;
    line-height: 0;
    border-left:1px solid black;
    border-top:1px solid black;
}

.clearboth {
    clear: both;
}

See: 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.

score 1 · Answer 2 · answered Mar 17 '13 at 18:48

Try using display table, table cell.... Something like this:-

<div class="outer">
    <div class="boxrow">
    <div class="box">
         <h2>DIV</h2>

    </div>
    <div class="box">
         <h2>DIV</h2>

    </div>
    <div class="box">
         <h2>DIV</h2>

    </div>
    </div>
    <div class="boxrow">
    <div class="box">
         <h2>DIV</h2>

    </div>
    <div class="box">
         <h2>DIV</h2>

    </div>
    <div class="box">
         <h2>DIV</h2>

    </div>
    </div>
    <div class="boxrow">
    <div class="box">
         <h2>DIV</h2>

    </div>
    <div class="box">
         <h2>DIV</h2>

    </div>
    </div>

</div>

.box {
    display:table-cell;
    border:1px solid;
}
.outer {
    display: table;
    border:1px solid;
}
.clearboth {
    clear: both;
}
.boxrow{
    display:table-row;
}

Sorry I probably should have added - the percentage may change from 33 to 25 etc so this probably isn't a viable solution for me - I'll add that to the OP. — user319940, Mar 17 '13 at 20:18

score 0 · Answer 3 · answered Mar 18 '13 at 10:53

0

Is adding classes dynamically a viable option for you?

You could so something like add a last class to the end of each row then a bottom class to each item in the last row.

.last {border-right:0;}
.bottom {border-bottom:0;}

Would then give you something like this - http://jsfiddle.net/vrLhY/39/

answered Mar 18 '13 at 10:53

micp

93
5

I was thinking of a solution like this but there's not really a good way of knowing which div is the end of a row as far as I know. – user319940 Mar 18 '13 at 11:29
Could you not do the following - Have a variable which allows you to set the number of columns on each row. Another which counts up the total number of columns and another which does a little division to work out how many rows they are in total based on these two values? You could then use these values to assign the last and bottom classes based on the counts? – micp Mar 18 '13 at 11:38
It's definitely an option - probably a little too heavy for something like this but I may end up using something like that. – user319940 Mar 18 '13 at 11:56

Grid of div's with touching borders - stop doubling up

3 Answers3