Menu
I am hoping to find a resource for lining up input elements in a HTML page. I find it difficult to get a select element and a text box to be the same width even when using the width style attribute, and it is even more difficult across browsers. Finally, file inputs seem impossible to get to the same width cross browser. Are there any good guides or tips for accomplishing this? Perhaps there are some default CSS attributes I should be setting.
863
HTML | <input> align Attribute left: It sets the alignment of image to the left. it is a default value. right: It sets the alignment of image to the right. middle: It sets the alignment of image to the middle.
We specify the margin-bottom of our <div> element. Then, we set the display of the <label> element to "inline-block" and give a fixed width. After that, set the text-align property to "right", and the labels will be aligned with the inputs on the right side.
try setting specific width to your text-boxes with display: inline-block property. Glad it worked. Then can you please accept my answer. Hello again, it works fine on desktop but on mobile it'a aligned weirdly when placed in the footer.
I tested this out in Internet Explorer 7, Firefox 3 and Safari/Google Chrome. I definitely see the problem with <select> and <input type="file">. My findings showed that if you styled all the inputs at the same width, the <select> would be about 5 pixels shorter in all browsers.
Using the Eric Meyer CSS reset script does not help this issue, however if you simply make your <select> inputs 5 pixels wider you'll get very good (albeit not perfect) alignment in the major browsers. The only one that differs is Safari/Google Chrome, and it appears to be 1 or 2 pixels wider than all the other browsers.
As far as the <input type="file"> is concerned, you don't have much flexibility with styling there. If JavaScript is an option for you, you can implement the method shown on quirksmode to achieve greater control over the styling of the file upload control.
See my full working example below in XHTML 1.0 Strict for a typical form with consistent input widths. Note that this does not use the 100% width trick pointed out by others here because it has the same problem with inconsistent widths. Additionally there are no tables used to render the form as tables should only be used for tabular data and not layout.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example Form</title> <style type="text/css"> label, input, select, textarea { display: block; width: 200px; float: left; margin-bottom: 1em; } select { width: 205px; } label { text-align: right; width: 100px; padding-right: 2em; } .clear { clear: both; } </style> </head> <body> <form action="#"> <fieldset> <legend>User Profile</legend> <label for="fname">First Name</label> <input id="fname" name="fname" type="text" /> <br class="clear" /> <label for="lname">Last Name</label> <input id="lname" name="lname" type="text" /> <br class="clear" /> <label for="fav_lang">Favorite Language</label> <select id="fav_lang" name="fav_lang"> <option value="c#">C#</option> <option value="java">Java</option> <option value="ruby">Ruby</option> <option value="python">Python</option> <option value="perl">Perl</option> </select> <br class="clear" /> <label for="bio">Biography</label> <textarea id="bio" name="bio" cols="14" rows="4"></textarea> <br class="clear" /> </fieldset> </form> </body> </html>I usually put them inside a div or table cell (horrors! I know) of the width I want, then set the select and input style:width to 100% so they fill the div / cell they are in.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
