Div layout width not expanding fully-CodePudding

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 >
        <div >
            <div >
                <div >Name</div>
                <div >Value</div>
            </div>
            <div >
                <div >Description</div>
                <div >Value</div>
            </div>
            <div >
                <h3>HEADER</h3>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
            </div>
            <div >
                <h3>HEADER</h3>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
            </div>
            <div >
                <div >Metric</div>
                <div >Value</div>
            </div>
        </div>
    </div>

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

CodePudding user response：

It looks like the issue with the spacing at the bottom of the header blocks may be caused by the bottom property on the h3 element within the detail-block class. This is set to -45px, which is creating space between the header block and the preceding detail-row. You can try setting this to 0px or removing it completely to remove the spacing.

Regarding the issue with the bottom border not extending to the full width of the header block, it seems that this may be caused by the width property on the detail-value class. This is currently set to 500px, which is causing the border to only extend to that width. You could try removing this property or setting it to 100% instead.

Additionally, you might consider to use flexbox instead of table layout in order to make more dynamic your layout.

Also, the div.detail-block .detail-key{ width: 200px;} might be causing the issues with the border not being displayed as you wish. As it's being overwritten by a previous class definition with a different width value.

CodePudding user response：

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 >
        <div >
            <div >
                <div >Name</div>
                <div >Value</div>
            </div>
            <div >
                <div >Description</div>
                <div >Value</div>
            </div>
            <div >
                <h3>HEADER</h3>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
            </div>
            <div >
                <h3>HEADER</h3>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
                <div >
                    <div >Metric</div>
                    <div >Values</div>
                </div>
            </div>
            <div >
                <div >Metric</div>
                <div >Value</div>
            </div>
        </div>
    </div>
    </div>