Simply put, the issue is this:
Why doesn't the second row of elements, with widths of 35% and 55%, take up the same amount of the page's width as the first form element which uses 90%?
I often have to adjust the percentages differently depending on the composition of the elements per page.
Compounding the confusion, as the browser width changes (narrower), the columns eventually align, and when made even smaller, the problem reverses with the first row narrower than the second.
In searching for a solution, I found my problem getting mixed in with others wanting their form elements aligned to the right. So now it's my turn for a poorly worded question. :) I simply want my form elements to be organized neatly, with the right edge of each element lined up with the others.
Consider the following example:
<html>
<head>
<title>Form</title>
<style text="text/css">
<!--
html, body {
margin:0; padding:0;
}
form {
display: block;
}
.inputField {
width: 90%;
}
.labelField {
width: 35%;
}
#secondField {
width: 55%;
}
-->
</style>
</head>
<body>
<form>
<legend>This is the form</legend>
<input class="inputField" id="firstField" type="tel" name="cardNo" /><br />
<label class="labelField" for="secondField">Please enter your name:</label>
<input class="inputField" id="secondField" type="tel" name="cv2" /><br />
<input class="inputSubmit" id="submit" type="submit" /><br />
</form>
</body>
</html>
I've attempted using dl/dt/dd and clunky table/tr/td layouts along with ul/li forms. All experience similar issues. Firefox displays only minor discrepancies, but Chrome & iOS really emphasize the problem. An ideal solution that works seamlessly across Android and iOS browsers would be highly beneficial.
The actual form I'm working with has the following structure:
Select Input
Text Input
Select Input | Select Input
Label | Text Input
Submit | Label | Checkbox