Question

I’m not sure if this is a browser bug or if I am missing something subtle. Along the top of my page I have 2 select drop-downs, a label and then a text box all arranged horizontally. Everything is aligned to the left.

Initially, only the first select box is populated. When the user selects an item, the second box is populated via JavaScript. When this happens the width of the second select box increases to accommodate the contents and the label is pushed to the right. However the problem is that the input box does not move and ends up overlapping the select box.

In Firefox everything works fine and both the label and the text box get pushed to the right. Also, if I open the IE developer tools, select the text-box and un-check align left and then re-check it the text box moves to where it should be.

My html looks like this:

<div id="main-top">
    <select id="firstSel" name="firstSel" >
        <option value="">-- Select an Item --</option>
        <option value="one">One</option>
    </select>
    <select id="secondSel" name="secondSel" >
        <option value="">--</option>
    </select>
    <label for="Currency">Currency:</label>
    <input class="input-sm" type="text" id="BECurrency" name="Currency" />
</div>

Any suggestions on how to solve this annoying problem?

Answer 1

I ended up fixing the width of the element in the css. This means that the width is set so that it is always the same width in all browsers.