Aligning text and select boxes to the same width in CSS?

Question

Ok this is seemingly impossible to get right. I have a text box and a select box. I want them to be the same width exactly so they line up on the left margin and the right m

Answer 1

This is because the <input type="text" /> element has a slightly different default style to the <select> element e.g. the border, padding and margin values may be different.

You can observe these default styles through an element inspector such as Firebug for Firefox or the built-in one for Chrome. Futhermore, these default stylesheets differ from browser to browser.

You have two options:

1. Explicitly set the border, padding and margin values to be the same for both elements
2. A CSS reset stylesheet to be included before your own CSS stylesheets

I would go with option 1. because option 2. requires a lot of work and you'll end up with tons of unnecessary CSS. But some web developers prefer to start from scratch and have complete control.