Clever Geek Handbook

Make divs equal height in line

I have a spreadsheet with different sized divs on the same row as shown below:

enter image description here

How to make the labels the same in height and vertical: at the bottom?

This should be easy to fix - I just can't see the mistakes I made. I've tried a lot of things, read a lot of SO posts and spent over 3 hours trying to figure this out on my own. I'm stumped!

Here are my CSS and HTML:

    .wrapper {
        border-spacing: 0px 0px;
        display: table;
        font-family: verdana;
        font-size: 12px;
        width: 100%;
    }
    
    .dhtr {
        display: table-row;
    
    }
    
    .label01 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;
        direction: ltr;
        display: table-cell;
        float: left;
        font-weight: bold;
        padding: 2px;
        padding-right: 10px;
        text-align: left;
        vertical-align: bottom;
        width: calc(100% - 15% - 15% - 60px - 72px - 15%);  /* subtract the lengths of all five divs */
        word-wrap: break-all;
    
        background-color: aqua;
    
    }
    
    .label02 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        font-weight: bold;
        height: 100%;
        overflow: hidden;
        padding: 2px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: left;
        vertical-align: bottom;
        width: 15%;
        word-wrap: break-all;
    
        background-color: fuchsia;
    }
    
    .label03 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        font-weight: bold;
        overflow: hidden;
        padding: 2px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: left;
        vertical-align: bottom;
        width: 15%;
        word-wrap: break-all;
    
        background-color: khaki;
    }
    
    .label04 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        font-weight: bold;
        overflow: hidden;
        padding: 2px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
        vertical-align: bottom;
        width: 60px;
        word-wrap: break-all;
    
        background-color: mediumpurple;
    }
    
    .label05 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        font-weight: bold;
        overflow: hidden;
        padding: 2px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
        vertical-align: bottom;
        width: 72px;
        word-wrap: break-all;
    
        background-color: palegreen;
    }
    
    .label06 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        font-weight: bold;
        overflow: hidden;
        padding: 2px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: left;
        vertical-align: bottom;
        width: 15%;
        word-wrap: break-all;
    
        background-color: teal;
    }
    
    .dctr {
        width: 100%;
    }
    
    .content01 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        overflow: hidden;
        padding: 2px;
        padding-bottom: 10px;
        padding-right: 10px;
        text-align: left;
        vertical-align: top;
        width: calc(100% - 15% - 15% - 60px - 72px - 15%);  /* subtract the lengths of all five divs */
        word-wrap: break-all;
    
        background-color: coral;
    }
    
    .content02 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        overflow: hidden;
        padding: 2px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: left;
        vertical-align: top;
        width: 15%;
        word-wrap: break-all;
    
        background-color: gold;
    }
    
    .content3 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        overflow: hidden;
        padding: 2px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: left;
        vertical-align: top;
        width: 15%;
        word-wrap: break-all;
    
        background-color: lime;
    }
    
    .content04 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        overflow: hidden;
        padding: 2px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
        vertical-align: bottom;
        width: 60px;
        word-wrap: break-all;
    
        background-color: orange;
    }
    
    .content05 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        overflow: hidden;
        padding: 2px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
        vertical-align: bottom;
        width: 72px;
        word-wrap: break-all;
    
        background-color: red;
    }
    
    .content06 {
        -webkit-box-sizing: border-box;  /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;  /* Firefox, other Gecko */
        box-sizing: border-box;  /* Opera/IE 8+ */
        direction: ltr;
        display: table-cell;
        float: left;
        overflow: hidden;
        padding: 2px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        text-align: left;
        vertical-align: bottom;
        width: 15%;
        word-wrap: break-all;
    
        background-color: wheat;
    }
      

        
        
        
      

    
 <div class="wrapper">
        <div class="dhtr">
            <div class="label01">License</div>
            <div class="label02">License Type</div>
            <div class="label03">Issuing Authority</div>
            <div class="label04">Years Held</div>
            <div class="label05">Expiry</div>
            <div class="label06">Restrictions</div>
        </div>
        <div class="dctr">
            <div class="content01" >My Licence Details Description</div>
            <div class="content02">Car - Manual</div>
            <div class="content03">My Issuing Authority</div>
            <div class="content04">12</div>
            <div class="content05">01/2017</div>
            <div class="content06">None</div>
        </div>
    </div>
Run codeHide result


+3
html css


source to share


2 answers


@Amit is correct on floats. You don't need to use when you usedisplay: table-cell;

I also spent time cleaning up the CSS, made me nuts;)



<div class="wrapper">
<div class="dhtr">
    <div class="label01">License</div>
    <div class="label02">License Type</div>
    <div class="label03">Issuing Authority</div>
    <div class="label04">Years Held</div>
    <div class="label05">Expiry</div>
    <div class="label06">Restrictions</div>
</div>
<div class="dctr">
    <div class="content01">My Licence Details Description</div>
    <div class="content02">Car - Manual</div>
    <div class="content03">My Issuing Authority</div>
    <div class="content04">12</div>
    <div class="content05">01/2017</div>
    <div class="content06">None</div>
</div>
</div>

* {
    -webkit-box-sizing: border-box;        
    -moz-box-sizing: border-box;       
    box-sizing: border-box;
}
.wrapper {
    border-spacing: 0px 0px;
    display: table;
    font-family: verdana;
    font-size: 12px;
    width: 100%;
}
.dhtr, .dctr {
    display: table-row;
}
.dhtr > div, .dctr > div {
    direction: ltr;
    display: table-cell;
    font-weight: bold;
    text-align: left;
    vertical-align: bottom;
    overflow: hidden;
    word-wrap: break-all;
}
.label01 {
    padding: 2px;
    padding-right: 10px;
    width: calc(100% - 15% - 15% - 60px - 72px - 15%);
    /* subtract the lengths of all five divs */
    background-color: aqua;
}
.label02 {
    height: 100%;
    padding: 2px 10px 10px 2px;
    width: 15%;
    background-color: fuchsia;
}
.label03 {
    padding: 2px 10px 10px 2px;
    width: 15%;
    word-wrap: break-all;
    background-color: khaki;
}
.label04 {
    padding: 2px 10px 10px 2px;
    text-align: center;
    width: 60px;
    background-color: mediumpurple;
}
.label05 {
    padding: 2px 10px 10px 2px;
    text-align: center;
    width: 72px;
    background-color: palegreen;
}
.label06 {
    padding: 2px 10px 10px 2px;
    width: 15%;
    background-color: teal;
}
.dctr {
    width: 100%;
}
.content01 {
    padding: 2px 10px 10px 2px;
    vertical-align: top;
    width: calc(100% - 15% - 15% - 60px - 72px - 15%);
    /* subtract the lengths of all five divs */
    background-color: coral;
}
.content02 {
    padding: 2px 10px 10px;
    vertical-align: top;
    width: 15%;
    background-color: gold;
}
.content3 {
    padding: 2px 10px 10px;
    vertical-align: top;
    width: 15%;
    background-color: lime;
}
.content04 {
    padding: 2px 10px 10px;
    width: 60px;
    background-color: orange;
}
.content05 {
    padding: 2px 10px 10px;
    text-align: center;
    width: 72px;
    background-color: red;
}
.content06 {
    padding: 2px 10px 10px;
    width: 15%;
    background-color: wheat;
}
+1


source to share


Try it like this:



Remove everything float:left

and usefloat: none;

+1


source to share






More articles:


All Articles
Loading...
X
Show
Funny
Dev
Pics