Question

So I am web developer who used to have a kind graphics design person help me out on this sort of browser compatibility hell, but alas he has moved on to greener pastures. The following html looks fine and dandy on chrome, but the table I am using to align my form is sleeping on the job on the bottom in ie and firefox. Should I never use tables? Is the float in the div tags screwing everything up? Any hints or suggestions for improving my html and css would be much appreciated.

Also, the text area text gets a little screwy sometimes in terms of where it is positioned in the box.

Thank you all.

<div style="border-style:solid; border-color:#336699; padding: 5px; margin-left:auto; margin-right:auto; width:600px; height:300px;" id="demoContainer">

    <div style="" id="demo">
        <div style="" id="demoHeader">
            <img src="someimage" />
            <span style="font-size:32px;">Demo</span>
        </div>
        <div style="" id="demoBody">
            <form method="get">
                <div style="float:left; padding:5px;" id="demoBodyText">
                    <textarea style="resize:none;" rows="10" cols="30">
                        Enter demo text here...
                    </textarea>
                </div>
                <div style="float:right; padding:5px;" id="demoBodyOptions">
                    <table style="float:right;">
                        <tr>
                            <th>
                                Option 1:
                            </th>
                            <td>
                                <select style="">
                                    <option>asdf</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                Option 2:
                            </th>
                            <td>
                                <select style="align:left;">
                                    <option value="320">Fastest</option>
                                    <option value="260">Faster</option>
                                    <option value="200">Fast</option>
                                    <option value="170" selected="selected">Default</option>
                                    <option value="130">Slow</option>
                                    <option value="110">Slower</option>
                                    <option value="80">Slowest</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                Option 3:
                            </th>
                            <td>
                                <select>
                                    <option value="4.2">Highest</option>
                                    <option value="3">Higher</option>
                                    <option value="2">High</option>

                                    <option value="1" selected>Default</option>
                                    <option value="0.8">Low</option>
                                    <option value="0.6">Lower</option>
                                    <option value="0.4">Lowest</option>
                                </select style="align:left;">
                            </td>
                        </tr>
                        <tr>
                            <th>
                                Option 4
                            </th>
                            <td>
                                <select>
                                    <option value="none">None</option>

                                </select style="align:left;"    >
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="submit" />
                            </td>
                        </tr>
                    </table>
                </div>  
            </form>
        </div>
        <div style="clear:both;" id="demoFooter">
            Footer
        </div>
    </div>
</div>

EDIT: Added image in how it displays in my firefox version 10.

Answer 1

See the fiddle – Is this you are looking for?

Fiddle: http://jsfiddle.net/jKtkq/

Demo: http://jsfiddle.net/jKtkq/embedded/result/

Screen shot: http://img39.imageshack.us/img39/7676/tableissue.jpg