positioning a table within a div element for cross-browser support

Question

Let me start out by saying I am no fan of tables but I have not been able to come up with an elegant solution to this issue. I am trying to setup a page that has a search bar with three buttons to the left followed by two hyperlinks stacked on top of one another. This entire control needs to be rendered in the center of the webpage

Where I ran into the first issue was with the hyperlinks the only way I seemed to get this layout was using a table.

This leads to the second issue of it not properly rendering in safari or chrome. IE and firefox renders this in the center of the page as desired with everything in the proper position. However Safari and chrome take the table (containing the hyperlinks) and slam it to the immediate left of the page.

Can anyone point me in the correct direction as to how to render out these elements to obtain the desired layout or at least correct the issue I am having in Safari/chrome of the table rendering to the left of everything else.

Code below

html

 <div id="search" class="searchcontainer">
                <asp:TextBox ID="tbsearchterm" CssClass="watermark" runat="server" OnTextChanged="tbsearchterm_TextChanged" />
                <div class="buttons">
                    <asp:LinkButton runat="server" Text="Search" class="button search-big" ID="btnSearch"
                        OnClick="btnSearch_Click" />
                    <asp:LinkButton runat="server" Text="Fx" class="button left big" ID="btnOperators" />
                    <asp:LinkButton runat="server" Text="Save" class="button right big" ID="btnSave" />
                </div>
                <table id="searchoptions">
                    <tr>
                        <td>
                            <a href="#" id="btnAdvanceSearch">Advanced Search</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#" id="btnFilters">Filters</a>
                        </td>
                    </tr>
                </table>
            </div>

CSS

    .searchcontainer 
{
    min-width:840px;
    display:inline;
    position:relative;
    padding-top:20px;
    margin-left:auto;
    margin-right:auto;
}

#searchoptions
{
    display:inline; 
    text-align:left;
    font-size:.8em;
    width:100px;
    padding:0px;
    vertical-align:top;
    position:relative;
    margin:0px;
}


#tbsearchterm {
    width:470px;
    height:32px;
    text-align:left;   
    padding-left:10px;
    padding-right:10px;
    font-size: 1.3em;
    border:1px solid #cccccc;
    -khtml-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;

}

Thanks in advance for any tips or suggestions

Update This control also uses jquery to hide certain elements when the page loads. As a result float is not the best option. When some of the elements are hidden the control still renders off to the left. For this reason I need to use display:inline for the elements nested in the main container ("searchcontainer").

Answer 1

body { width: 100%; text-align: center; }
.container { overflow: hidden; width: 500px; margin: 0 auto; }
input { float: left; }
button { float: left; }
.links { float: left; }

<div class="container">
   <input type="text"/>
   <button id="button1">Button 1</button>
   <button id="button2">Button 2</button>
   <button id="button3">Button 3</button>
   <div class="links">
        <a href="">Link 1</a><br/>
        <a href="">Link 2</a><br/>
   </div>
</div>

Just float the inputs, buttons and .link div left. Should work in all browsers. :)

Check it out here: http://jsfiddle.net/F7hQf/