Home/ Questions/Q 7178717
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T16:58:34+00:00

Put simply the problem is thus: If the first form element uses 90% of

  • 0

Put simply the problem is thus:

If the first form element uses 90% of page width why doesn’t the second row of elements, using 35% and 55%, use the same amount of the pages width?

I find I have to tweak the % up by differing amounts depending on the elements/page composition.

More confusingly as browser width changes (narrows) the columns eventually align and going smaller still the problem becomes inverted with the first row narrower than the second.

I’ve tried to search but my problem gets mixed up with people wanting their form elements on the right. So it’s my turn for a bad SO question. 🙂 I simply want my form elements to be neat, the right hand edge of each element to be in line with the others.

A simple example is the following:

<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 have tried using dl/dt/dd and horrible table/tr/td and even ul/li type forms. All suffer similar issues. Some browsers, such as firefox are only slightly out, but chrome & iOS highlight the problem well. Ideally a solution that specifically works in android and ios browsers would be good.

The actual form I’m dealing with has the following layout:

Select Input
Text Input
Select Input | Select Input
Label        | Text Input
Submit       | Label        | Checkbox
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, not to delve too deeply, but your problem really seems to be rooted in how you are structuring your form in general. Creating a form style layout is pretty straightforward once you have it a bit planned out. Remember, browsers like FF and IE render things like padding and such slightly differently. Furthermore, a lot of elements tend to have some built in padding, margins, etc… that can cause havoc with your page, especially when using percentages. In fact, if you use the code below, you will notice that a little bit of extra padding went into positioning the button, to make up for the difference caused by the other elements.

    Here is the CSS:

    html, body {
  margin:0; 
  padding:0;
}

form {
  display: block;
}

input[type="submit"]
{
  width:150px !important;  
}

.base-form
{
  width:100%;
}

.base-form p label
{
  width: 15%;
  display:inline-block;
}

.base-form p input
{
  width: 55%;
}

.base-form .btn-row
{
  width:70%;
  padding:0px 10px;
}

.base-form .btn-row p
{
  text-align:right;
}

    And here is the HTML:

    <form class="base-form">
   <legend>This is the form</legend>
   <p>
      <label for="firstField">Please enter your name:</label>
      <input id="firstField" type="tel" name="cardNo" />
   </p>
   <p>
      <label for="secondField">Please enter your telephone:</label>
      <input id="secondField" type="tel" name="cv2" />
   </p>
   <div class="btn-row">
      <p>
         <input id="submit" type="submit" />
      </p>
   </div>
</form>

    Now, for my part, I tend to not use the “br” tag very much, and try to do a more uniform layout. However, if you really need to use it, or you have various elements in drastically different positions on the page, then be prepared to do some style work.

    • 0