Question

I’m making a table-like layout using only CSS. With all the cells set to float:left the container .matrix is wide enough for 4 cells horizontally.

<div class="matrix">
    <!-- first row -->
    <div class="cell">Cell contents</div>
    <div class="cell">Cell contents</div>
    <div class="cell">Cell contents</div>
    <div class="cell right">Cell contents</div>
    <!-- last row -->
    <div class="cell last">Cell contents</div>
    <div class="cell last">Cell contents</div>
    <div class="cell last">Cell contents</div>
    <div class="cell last right">Cell contents</div>
</div>

To control where the border-styles are applied I use .last and .right classes to omit border-styles on the edges:

.cell {
    border-bottom:1px solid red;
    border-right:1px solid red;
}
.right {
    border-right:none;
}
.last {
    border-bottom:none;
}

I’m wondering if anyone has a technique where I achieve the same result/logic – but without the need for the extra classes.

Thanks for your assistance!

Answer 1

I think I found a solution without using extra classes, CSS3 selectors or wrapper elements. By giving the container an overflow:hidden, and shifting the cells slightly like so:

.matrix{
    width:400px;
    overflow:hidden;
}

.cell {
    width:100px;
    float:left;
    border-left:1px solid #ccc;
    border-bottom:1px solid #ccc;
    position:relative;
    bottom:-1px;
    padding:5px;
    left:-1px;
}

See example here: http://jsfiddle.net/KBMvL/5/