I have created a structure using divs to mimic table elements for an entry form. My goal is to make the left column, where field labels are located, 50% wide with an additional 2 em space to accommodate an asterisk marking required fields. The right column, which contains the actual fields, should then occupy the remaining space.
Despite trying to use the calc function to set the widths accordingly, I encountered an issue in my current Chrome browser. The columns ended up with arbitrary widths instead of following the specified rules. Upon inspecting the element, the rule seemed active. What could be causing this discrepancy? Is there an incompatibility between calc and display:table-cell? Or did I make a mistake in implementing it?
Below is the HTML code snippet:
<div class="mock-table">
<div class="entryRow">
<div class="mock-td nested-label-column">
<label class="entryFieldLabel" for="Mutations_0__GeneSpecies">Gene donor</label>
</div>
<div class="mock-td nested-field-column">
<select class="SpeciesList SpeciesListGene entryField" data-val="False" data-val-dropdown="False" data-val-number="False" id="SpeciesListGene_8449" name="Mutations[0].GeneSpecies.Value">
<option value="2">Black rat</option>
<option value="61">Cat</option>
<option value="4">Cattle</option>
</select>
<button class="addNewSpecies flatButtonSecondary" type="button" value="A_8449" id="GeneSpeciesList_8449">add other species</button>
</div>
</div>
And here is the corresponding CSS:
.dialog-label-column, .nested-label-column {
width: calc(50% + 2em);
}
.dialog-field-column, .nested-field-column {
width: calc(50% - 2em);
}
.entryRow {
overflow: hidden;
display: table-row;
width: 100%;
}
div.mock-td {
display: table-cell;
vertical-align: top;
padding-bottom: 0.7em;
}
div.mock-table {
display: table;
}
Upon testing at a specific browser window width, the left column measured 130px while the right column was 371px wide, deviating from the intended almost 50% width distribution.