Div layout width not expanding fully

Question

I am trying to assemble specific div layout, but I am running into two issues:

At the bottom of header blocks, there is a slight spacing, I can't seem to get rid of that
Metric values on the header blocks do not have the bottom border extended to full width. I've tried to setting to 100% or auto but it just keeps messing the layout to double rows and missmatches itself.

div.detail-block .detail-value{
            width: 100%;
        }

This makes it into two colums instead of below each other.

div.detail-block .detail-value{
            width: auto;
        }

Could you please help me figure out where the issue is? I think I am using wrongly the display attributes in combinations with others, maybe I should try different approach?

div.detail-block {
            position: relative;
            border-left: 30px solid #9e9e9e;
            display: inline-block;
        }

        div.detail-block h3 {
            font-family: Calibri, system-ui;
            font-size: 1.4rem;
            color: #f4f5f7;
            text-transform: uppercase;
            margin-left: -35px;
            position: absolute;
            bottom: -45px;
            left: 5px;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
            -webkit-transform: rotate(270deg);
            -moz-transform: rotate(270deg);
            -ms-transform: rotate(270deg);
            -o-transform: rotate(270deg);
            transform: rotate(270deg);
            -webkit-transform-origin: 0 0;
            -moz-transform-origin: 0 0;
            -ms-transform-origin: 0 0;
            -o-transform-origin: 0 0;
            transform-origin: 0 0;
        }

        div.detail-container {
            width: 100%;
        }

        div.detail-row:hover {
            background: #ffffff;
        }

        div.detail-row {
            border-bottom: 1px solid #dddddd;
            line-height: 0.9;
        }

        div.detail-row .detail-key {
            width: 230px;
            background: #dfe1e5;
            border: 1px solid #ffffff;
            font-family: Calibri, system-ui;
            font-size: 16px;
            font-weight: 900;
            display: table-cell;
            padding: 3px 10px;
            text-align: right;
            justify-content: left;
        }

        div.detail-block .detail-key{
            width: 200px;
        }

        div.detail-row .detail-value {
            font-family: Consolas, system-ui;
            text-align: left;
            display: table-cell;
            padding: 3px 10px;
        }

        div.detail-block .detail-value{
            width: 500px;
        }

        .detail-container{
            display: table;
            width: 600px;
        }

<div class="detail-container">
        <div class="detail-table">
            <div class="detail-row">
                <div class="detail-key">Name</div>
                <div class="detail-value">Value</div>
            </div>
            <div class="detail-row">
                <div class="detail-key">Description</div>
                <div class="detail-value">Value</div>
            </div>
            <div class="detail-block">
                <h3>HEADER</h3>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
            </div>
            <div class="detail-block">
                <h3>HEADER</h3>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
            </div>
            <div class="detail-row">
                <div class="detail-key">Metric</div>
                <div class="detail-value">Value</div>
            </div>
        </div>
    </div>

My attempt so far is : https://jsfiddle.net/gbr23tnj/

I'm not too sure about what you mean about point 2. The bottom border appears to extend full width on your example? — Adam, Jan 19 '23 at 10:35
The gap below your div is because `.detail-block` has an inline display type and a small space is added to accomodate descenders. This is explained in [this post](https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image). Changing this to `display: block` fixes this problem. — Adam, Jan 19 '23 at 10:36
Thanks for the suggestion, I'll look into that. On the 2nd point, it is better shown on full screen. I have set the width to 500px to "force" to full width in my case, but I was hoping for the two headers to evenly space out the width of possible screen, along with the bottom borders. — jbrezik, Jan 19 '23 at 10:42
The gap I was talking about displayed in the red circle https://imgur.com/a/Padodtc — jbrezik, Jan 19 '23 at 10:49

score 1 · Accepted Answer · answered Jan 19 '23 at 10:53

1- line-height: 0;

2- rather than setting the .detaul-value class we can set its parent to width:100%; it will fix the issue.

div.detail-block{
            width: 100%;
        }

div.detail-block {
            position: relative;
            border-left: 30px solid #9e9e9e;
            display: inline-block;
            width: 100%;
        }

        div.detail-block h3 {
            font-family: Calibri, system-ui;
            font-size: 1.4rem;
            color: #f4f5f7;
            text-transform: uppercase;
            margin-left: -35px;
            position: absolute;
            bottom: 5px; 
            left: 20px;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
            -webkit-transform: rotate(270deg);
            -moz-transform: rotate(270deg);
            -ms-transform: rotate(270deg);
            -o-transform: rotate(270deg);
            transform: rotate(270deg);
            -webkit-transform-origin: 0 0;
            -moz-transform-origin: 0 0;
            -ms-transform-origin: 0 0;
            -o-transform-origin: 0 0;
            transform-origin: 0 0;
        }

        div.detail-container {
            width: 100%;
            
        }

        div.detail-row:hover {
            background: #ffffff;
        }

        div.detail-row {
            border-bottom: 1px solid #dddddd;
            line-height: 0.9;
        }

        div.detail-row .detail-key {
            width: 230px;
            background: #dfe1e5;
            border: 1px solid #ffffff;
            font-family: Calibri, system-ui;
            font-size: 16px;
            font-weight: 900;
            display: table-cell;
            padding: 3px 10px;
            text-align: right;
            justify-content: left;
            
        }

        div.detail-block .detail-key{
            width: 200px;
        }

        div.detail-row .detail-value {
            font-family: Consolas, system-ui;
            text-align: left;
            display: table-cell;
            padding: 3px 10px;
        }

        div.detail-block .detail-value{
            /* width: 500px; 
            No need to use it i will set the conatiner of this element to width:100%
            */

        }

        .detail-container{
            display: table;
            width: 600px;
            line-height: 0;
            /*line-height works with tables to remove the space between two cells 
        }

   <div class="detail-container">
        <div class="detail-table">
            <div class="detail-row">
                <div class="detail-key">Name</div>
                <div class="detail-value">Value</div>
            </div>
            <div class="detail-row">
                <div class="detail-key">Description</div>
                <div class="detail-value">Value</div>
            </div>
            <div class="detail-block">
                <h3>HEADER</h3>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
            </div>
            <div class="detail-block">
                <h3>HEADER</h3>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
                <div class="detail-row">
                    <div class="detail-key">Metric</div>
                    <div class="detail-value">Values</div>
                </div>
            </div>
            <div class="detail-row">
                <div class="detail-key">Metric</div>
                <div class="detail-value">Value</div>
            </div>
        </div>
    </div>
    </div>

Div layout width not expanding fully

1 Answers1