html - make divs equal height across row -
i have tabular table has different sized divs on same row shown below:
how can make labels same height , vertical-align: bottom?
it must easy fix - cannot see mistake have made. have tried many things, read lot of posts , spent on 3 hours trying figure out on own. stumped!
here css , 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 lengths of 5 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 lengths of 5 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>
@amit correct on floats. don't need use when you're using display: table-cell;
i took time clean css, driving 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 lengths of 5 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 lengths of 5 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; }
Comments
Post a Comment