Question

The following code renders different layout if I remove the “menu” div code: the left text box shows more to the left in Firefox 3.6.13 and IE 8.0.

<div id="whole" style="width:800px;">
    <div id="menu" style="display:inline; width:800px;">
        <select name="select" id="c" style="display:inline; float: left; width:200px;" >
            <option value="alpha" selected="selected">alpha</option>
            <option value="omega">omega</option>
        </select>
    </div>
    <br>
    <div id="twoTextBox" style="display:inline; width:800px;">
        <div id="frame1" style="display:inline; float: left; width:250px;">
            <textarea rows="8" cols="20"  style="display:inline; float: left; width: 250px;"></textarea>
        </div>

        <div id="frame2" style="display:inline; float: right; width:250px;">
            <textarea rows="8" cols="20"  style="display:inline; float: right;  width: 250px;"></textarea>
        </div>
    </div>
</div>

Why is the “menu” div css interfering with the following div css?

Answer 1

remove the float:left; from the select and will be the same in all browsers. Also add overflow:auto for #whole to clear the floats, and try to avoid the inline styles.

Demo: http://jsfiddle.net/vFaRR/2/