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 t
This is because with an , the border and padding is added on to the width (like with most other elements). With a
You can get round this by increasing the width to take account of this:
input { width: 200px; padding: 10px; border-width:5px; }
select { width: 230px; padding: 10px; border-width:5px; }
Or (if you can rely on browser support) you can use the new CSS3 box-sizing property to make them behave consistently, and draw padding and border outside of the element width:
input, select {
width: 200px;
padding: 10px;
border-width:5px;
-webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: content-box; /* Firefox, other Gecko */
box-sizing: content-box; /* Opera/IE 8+ */
}
Alternatively, you can set box-sizing to border-box to make the inputs behave like the selects, with padding drawn inside the width of the box.
Tested in Chrome, IE8, FF