div width and height alignment for all levels of zooming

Question

Html code:

<div class="CorpPerformance">
            <div class="row">
            <div class="DashboardTitle">
                3 Month
            </div>
            <div class="DashboardScore" style="font-weight:bold">
                <a class="redirectLink" data-criteria-corporatesummarycategory="none" data-criteria-corporatesummaryexpand="0" data-criteria-customerpay="" data-criteria-expressservice="" data-criteria-maintenanceplan="" data-criteria-modelname="" data-criteria-rspenddate="" data-criteria-rspstartdate="" data-criteria-warrantypay="" data-criteria-yearmodel="" data-criteria-department="Sales" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[October 2014]" data-criteria-summaryperiod="3MONTH" href="/Corporate/OFSSurveySummary">950</a>
            </div>
            <div class="DashboardIcon">
<a class="bootstrap-modal" data-criteria-chartcustomerpay="" data-criteria-chartexpressservice="" data-criteria-chartmaintenanceplan="" data-criteria-chartmodelname="" data-criteria-chartmodelyear="" data-criteria-chartwarrantypay="" data-criteria-chartdepartment="SALES" data-criteria-chartmeasurename="Response Default Computation" data-criteria-chartmeasuretype="score" data-criteria-chartorganization="" data-criteria-chartpagetitle="NSSI Trend" data-criteria-chartreportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[October 2014]" data-criteria-chartsummaryperiod="3MONTH" data-criteria-charttitle="NSSI" data-criteria-chartwheretuple="[Questionnaire].[Questionnaire].[Question].&amp;[OFSP]&amp;[OFSP13011]" href="/Trend" modal-no-resize="True" upper="NSSI Trend"><span>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAZCAYAAACM9limAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHxSURBVFhH7Zg9SEJRFMcdW4QmcRI3xclNcYiGBocGB4dqMQTXdHdoFRqsoCAtJEiMKCpCHkHkECFJUNQgNqgEIQ19DIFBw8n/8SkUPft66n31fnBArnLh/O69556roQHp8WEYSOctuhgFhBdTLN5RLndN2WxZHukNQoopFGrk9W6S1Zogu32FhofXyeFI0cBAnHy+HUqlLunh4Vn+dWfq9RcWG4+f0sjIBnk8aZ5vcHC+kfgMz/URQolBspHIIdlsyxSLnVCl8ih/0wRJbm9f0eSkREbjHJlMC5wkYmIiS4GAxEJbY2bzIsvEZ8w7O3vKkhCfiRVGDFYOuwMr+1Vqtad2oonEOU1NHZAkldtj78V+h76LyedvWIjfv8uJikLfxGA1x8b2yO1O8+qKRs/FYFeMjm5xHclkivKoePRMTKuw4qaZnj7mQioyPRETDjeFoLCKLqRF18XgGh0f3/ty3yEKXRODnYGeQqmBEp2uiMHuQIeKnkKrqC6mVLqnoaGMpqUAVcXg+rVYlrht1zqqiMHRwfsFDZvWiqwSvxaTTF5wS6/VIqvEj8Wcnd3yq9XlWqNq9eePNVHpKAZvGCSPY4JuFREK7fMOcTpXhXzjqEVHMQDJ45hASjR6RMGgxP+q/XU+FfNf0cUo0Bajx/sw0CuzQYKdi8e4ggAAAABJRU5ErkJggg==">
                        </span></a>            </div>
            <div class="CvalNational">
                <span style="color:#fff;font-weight:bold;">
                National
                </span>
            </div>
            <br>
                </div>
        </div>

JSfiddle link :

http://jsfiddle.net/8nbyc9m7/

Output without zoom :

if i zoom to 110% or 150% or 60% zooming it gives different output. that means last section is not aligned properly.

with zoom:

how to maintain the same output for all levels of zooming in all browsers.

Answer 1

Here is your solution. What I did is to correct your table and remove the width of the last cell so that it can be flexible. I have used table and tr and td instead of div as it will make your css lighter.

If you can't or don't want to change your div for table, tr and td, you can always add the following css on your div: display: table; to replace table, display: table-row; to replace tr, and display: table-cell; to replace td. The result will be the same.

.CorpPerformance {
  border: 2px solid gray;
  border-radius: 5px;
  vertical-align: middle; /* it's defined for the whole table so you don't need to write it again */
  line-height: 30px;
  max-width: 343px;
  border-spacing: 0; /* important for Chrome browser that add spacing */
}
img {
  max-width: 100%;
  vertical-align: middle;
  border: 0;
}
.CorpPerformance > td {
  padding: 0 5px 3px; /* I've just simplified the writing */
}
.CorpPerformance .DashboardTitle {
  width: 110px;
}
.CorpPerformance .DashboardScore {
  width: 25px;
}
.CorpPerformance .DashboardIcon {
  width: 75px;
}
.CorpPerformance .CvalNational { /* no width anymore */
  text-align: center;
  border-left: 2px dotted black;
  background-color: gray;
  color: #fff; /* I've remove your span to put the css here, if you can do this it's best to keep html free of css */
  font-weight: bold;
}

<table class="CorpPerformance">
  <tr>
    <td class="DashboardTitle">3 Month</td>
    <td class="DashboardScore" style="font-weight:bold"> <a class="redirectLink" data-criteria-corporatesummarycategory="none" data-criteria-corporatesummaryexpand="0" data-criteria-customerpay="" data-criteria-expressservice="" data-criteria-maintenanceplan="" data-criteria-modelname="" data-criteria-rspenddate=""
      data-criteria-rspstartdate="" data-criteria-warrantypay="" data-criteria-yearmodel="" data-criteria-department="Sales" data-criteria-reportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[October 2014]" data-criteria-summaryperiod="3MONTH"
      href="/Corporate/OFSSurveySummary">950</a>
    </td>
    <td class="DashboardIcon">
      <a class="bootstrap-modal" data-criteria-chartcustomerpay="" data-criteria-chartexpressservice="" data-criteria-chartmaintenanceplan="" data-criteria-chartmodelname="" data-criteria-chartmodelyear="" data-criteria-chartwarrantypay="" data-criteria-chartdepartment="SALES"
      data-criteria-chartmeasurename="Response Default Computation" data-criteria-chartmeasuretype="score" data-criteria-chartorganization="" data-criteria-chartpagetitle="NSSI Trend" data-criteria-chartreportperiod="[Collection Date].[Calendar].[Calendar Month].&amp;[October 2014]"
      data-criteria-chartsummaryperiod="3MONTH" data-criteria-charttitle="NSSI" data-criteria-chartwheretuple="[Questionnaire].[Questionnaire].[Question].&amp;[OFSP]&amp;[OFSP13011]" href="/Trend" modal-no-resize="True" upper="NSSI Trend"><span>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAZCAYAAACM9limAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHxSURBVFhH7Zg9SEJRFMcdW4QmcRI3xclNcYiGBocGB4dqMQTXdHdoFRqsoCAtJEiMKCpCHkHkECFJUNQgNqgEIQ19DIFBw8n/8SkUPft66n31fnBArnLh/O69556roQHp8WEYSOctuhgFhBdTLN5RLndN2WxZHukNQoopFGrk9W6S1Zogu32FhofXyeFI0cBAnHy+HUqlLunh4Vn+dWfq9RcWG4+f0sjIBnk8aZ5vcHC+kfgMz/URQolBspHIIdlsyxSLnVCl8ih/0wRJbm9f0eSkREbjHJlMC5wkYmIiS4GAxEJbY2bzIsvEZ8w7O3vKkhCfiRVGDFYOuwMr+1Vqtad2oonEOU1NHZAkldtj78V+h76LyedvWIjfv8uJikLfxGA1x8b2yO1O8+qKRs/FYFeMjm5xHclkivKoePRMTKuw4qaZnj7mQioyPRETDjeFoLCKLqRF18XgGh0f3/ty3yEKXRODnYGeQqmBEp2uiMHuQIeKnkKrqC6mVLqnoaGMpqUAVcXg+rVYlrht1zqqiMHRwfsFDZvWiqwSvxaTTF5wS6/VIqvEj8Wcnd3yq9XlWqNq9eePNVHpKAZvGCSPY4JuFREK7fMOcTpXhXzjqEVHMQDJ45hASjR6RMGgxP+q/XU+FfNf0cUo0Bajx/sw0CuzQYKdi8e4ggAAAABJRU5ErkJggg==" /></span></a> 
    </td>
    <td class="CvalNational">Test National</td>
  </tr>
</table>

Answer 2

Setting the container to have a width equals to the parent container does the trick for me

http://jsfiddle.net/kursion/8nbyc9m7/2/

Btw... you should probably concider doing a simple table ?

.CorpPerformance {
padding-left: 5px;           <----------- changed
display: table;
border: 2px solid gray;
border-radius: 5px;
vertical-align: middle;
line-height: 30px;
width: 340px;                <----------- changed
}
.CorpPerformance .DashboardTitle {
width: 80px;                 <----------- changed
}
.CorpPerformance .DashboardScore {
width: 40px;                 <----------- changed
}
.CorpPerformance .DashboardIcon {
width: 100px;                 <----------- changed
}
.CorpPerformance .CvalNational {
width: 119px;                 <----------- changed
text-align: center;
border-left: 1px dotted black;
background-color: gray;
}

80px + 40px + 100px + 119px + 1px(border) = 340px

And I removed the padding

.CorpPerformance .row > div {}

Edit: with a table... it's much more easier and zoom works ! Check the link in my comment

Answer 3

http://jsfiddle.net/victor_007/8nbyc9m7/3/

* {
    box-sizing:border-box;
}

use box-sizing:border-box; which gives border and padding from inside and set the width exactly which you want