Frank Vel Frank Vel - 5 months ago 11
CSS Question

Make a grid of divs floated right with parent table div the size of its children

This is my failed attempt:


https://jsfiddle.net/j75hxxa2/1/


I want the block on the right side and the extra gray part gone.

Adding

float: right;


To the parent makes its children very small and tiny. If I try to widen the children by adding

width: 50%;


They break the line.

Is there a simple fix?

(Also I think

margin-top: 1px;


Isn't working?)

Thanks in advance

Answer

A better way is to use a table:

HTML:

<table>
  <tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
  <tr><td>I</td><td>II</td><td>III</td><td>IIII</td></tr>
</table>

CSS:

table {
    border-collapse: collapse;
    background: #000;
    border-top: 1px solid #777;
    border-left: 1px solid #777;
}

table tr td {
    border-right: 1px solid #777;
    border-bottom: 1px solid #777;
    color: #fff;
}