Align borders by CSS with nested divs

Question

I have the layout in https://jsfiddle.net/Ld07e4s7/4/ but I'm unable to make the first blue-border go to the same extent as the others blue-borders.

div.table
{
 width: 100%;
}

div.table > div.header .grid-column
{
 float: left;
}

div.table > div.header > div
{
 height: calc(1.5em);
 /*display: flex;
 align-items: center;*/
 justify-content: center;
 text-align: center;
}

div.table > div.header div
{
 box-sizing: border-box;
}

div.table > div.header .grid-row > .grid-column
{
 border-top: solid red 5px;
}

div.table > div.header > .grid-row > .grid-column
{
 border-left: solid blue 5px;
}

div.table > div.header > .grid-row > .grid-column .grid-column:nth-child(n+2)
{
 border-left: solid yellow 5px;
}

div.table > div.header .grid-column
{
 background-color: lightgreen;
 /*border: solid red 5px;*/
 /*box-sizing: border-box;*/
}

div.table > div.header .grid-row
{
 box-sizing: border-box;
}

.prensaGrid > div.header > div.grid-column
{
 height: calc(1.5em * 6);
}

.prensaGrid > div.header > div.grid-row > div.grid-column:nth-child(1)
{
 width: calc(100% / 17);
}

.prensaGrid > div.header > div.grid-row > div.grid-column:nth-child(n+2)
{
 width: calc(100% / 17 * 2);
}

<div class="table prensaGrid">
 <div class="header">
  <div class="grid-row">
   <div class="grid-column" style="height: calc(1.5em * 6)">Amostras</div>

   <div class="grid-column">
    <div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
     Diâmetro Externo<br />(mm)
    </div>
    <div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
     <div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
      Mín.
     </div>
     <div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
      Máx.
     </div>
    </div>
   </div>

   <div class="grid-column">
    <div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
     Profundidade Rebaixo<br />(mm)
    </div>
    <div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
     <div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
      Mín.
     </div>
     <div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
      Máx.
     </div>
    </div>
   </div>

   <div class="grid-column">
    <div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
     Profundidade Rebaixo<br />(mm)
    </div>
    <div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
     <div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
      Mín.
     </div>
     <div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
      Máx.
     </div>
    </div>
   </div>

   <div class="grid-column">
    <div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
     Profundidade Rebaixo<br />(mm)
    </div>
    <div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
     <div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
      Mín.
     </div>
     <div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
      Máx.
     </div>
    </div>
   </div>

   <div class="grid-column">
    <div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
     Profundidade Rebaixo<br />(mm)
    </div>
    <div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
     <div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
      Mín.
     </div>
     <div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
      Máx.
     </div>
    </div>
   </div>

   <div class="grid-column">
    <div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
     Profundidade Rebaixo<br />(mm)
    </div>
    <div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
     <div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
      Mín.
     </div>
     <div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
      Máx.
     </div>
    </div>
   </div>

   <div class="grid-column">
    <div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
     Profundidade Rebaixo<br />(mm)
    </div>
    <div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
     <div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
      Mín.
     </div>
     <div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
      Máx.
     </div>
    </div>
   </div>

   <div class="grid-column">
    <div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
     Profundidade Rebaixo<br />(mm)
    </div>
    <div class="grid-row" style="width: 100%; height: calc(1.5em * 3)">
     <div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
      Mín.
     </div>
     <div class="grid-column" style="width: 50%; height: calc(1.5em * 3)">
      Máx.
     </div>
    </div>
   </div>

   <div style="float: none; clear: both"></div>
  </div>

  <div style="float: none; clear: both"></div>
 </div>
 <div style="float: none; clear: both"></div>
</div>

<div style="float: none; clear: both"></div>

Maybe I do not understand well the box-sizing. But without it it brokens even more:

div.table > div.header div
{
    box-sizing: border-box;
}

Also this layout brokes in Edge. How can I fix it?

@AndréDion the real layout is very complex. I was using, but then I need to change the tbody display to make a scrollbar around only the tbody, and that brokes everything when I need to use rowspan/colspan. — Adriano dos Santos Fernandes, Dec 15 '16 at 18:40
I can't comment on what problems you were having with your use of ``, but this looks like a prime example of when you should be using tables to present tabular data. — André Dion, Dec 15 '16 at 18:43
@AndréDionno problem if you show me a table that works with the fixed header in the screen with scrollbars only in the body and that works with rowspan/colspan and settable widths with things like calc(100% / n). — Adriano dos Santos Fernandes, Dec 15 '16 at 18:45

score 1 · Answer 1 · answered Dec 15 '16 at 18:37

1

Since you use box-sizing: border-box, you need to add the border size:

height: calc(1.5em * 6 + 5px);

You could use box-sizing: content-box but then you would have horizontal problems.

answered Dec 15 '16 at 18:37

Oriol

274,082
63
437
513

I understand the thing about adding to the margin, but with border-box I understand that would not be necessary as the others box heights would be the same as without borders. No? – Adriano dos Santos Fernandes Dec 15 '16 at 18:42
@AdrianodosSantosFernandes `.grid-row` are `1.5em * 3` tall, with no border. So the outer height of the `.grid-column` with two `.grid-row`and a 5px top border is `1.5em * 6 + 5px`. Your first element has `height: calc(1.5em * 6)`, so with `box-sizing: border-box` its outer height is `height: calc(1.5em * 6)`. – Oriol Dec 16 '16 at 07:47
"So the outer height of the .grid-column with two .grid-rowand a 5px top border is 1.5em * 6 + 5px" -> @Oriol All the divs has "box-sizing: border-box;", so they heights should not be "+ 5px". If you change the red border to 15px, you clear see only the top row increases its height, but the bottom one (using the same style) does not. Why that happen? – Adriano dos Santos Fernandes Dec 16 '16 at 09:25
You set the border to .grid-column which has auto height. Of course the border won't be subtracted from the height contribution of the children, otherwise they would overflow. So you get +5px. Consider setting theborder to the .grid-row instead – Oriol Dec 16 '16 at 09:35

score 0 · Answer 2 · answered Dec 15 '16 at 22:28

I now achieve what I want: https://jsfiddle.net/mozf1uLk/

I do not understand why in the first example the group in the first row changed its height even with border-box.

Here is the version working:

<div class="table prensaGrid">
    <div class="header">
        <div class="grid-row">
            <div class="grid-column" style="height: calc(1.5em * 8)">1</div>

            <div class="grid-column-group">
                <div class="grid-row" style="width: 100%; height: calc(1.5em * 4)">
                    <div class="grid-column" style="width: 100%; height: calc(1.5em * 4)">
                        2
                    </div>
                </div>
                <div class="grid-row" style="width: 100%">
                    <div class="grid-column" style="width: 50%; height: calc(1.5em * 4)">
                        3
                    </div>
                    <div class="grid-column" style="width: 50%; height: calc(1.5em * 4)">
                        4
                    </div>
                </div>
            </div>
            <div style="float: none; clear: both"></div>
        </div>
    </div>
</div>

div.table
{
    width: 100%;
}

div.table > div.header .grid-column,
div.table > div.header .grid-column-group
{
    float: left;
}

div.table > div.header div
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

div.table > div.header .grid-row/*:not(:last-child)*/
{
    border-bottom: solid red 5px;
}

div.table > div.header .grid-column
{
    border-top: solid red 5px;
}

div.table > div.header > .grid-row .grid-column
{
    border-left: solid red 5px;
}

div.table > div.header > .grid-row .grid-column:last-child
{
    border-right: solid red 5px;
}

div.table > div.header .grid-column
{
    background-color: lightgreen;
}

.prensaGrid > div.header > div.grid-row > div.grid-column:nth-child(1)
{
    width: calc(100% / 3);
}

.prensaGrid > div.header > div.grid-row > div.grid-column-group:nth-child(n+2)
{
    width: calc(100% / 3 * 2);
}

Align borders by CSS with nested divs

2 Answers2