how to place div next to centered div css

Question

I have a search page that contains a textbox for the search and a link that says "advanced search" similar to google.

I am having trouble centering the textbox AND having 'Advanced Search' to the right of the textbox.

Basically I want the layout to look like googles See here

This was my shot:

            <div style="width:650px; margin-right:auto; margin-left:auto;">
                <%= Html.TextBox("SearchBar")%>
            </div>
            <div style="width:90px; float:right;">                    
                <a href="#" style="text-decoration:none">Advanced Search</a>
            </div>

Answer 1

Google uses a table to display their search box. The left and right columns have widths of 25% and the center column has a width of 50%. The search box is in the center column and the "Advanced Search" is in the right column. The left column is empty.

Then just center the table. Your search box will be centered and "Advanced Search" will appear on the right.

Answer 2

You can try using a wrapper div with 90px on each side and auto margin that instead. IE

<div class="wrapper">
    <div class="side"></div>
    <div class="textbox"><input type="text" id="myinput"></div>
    <div class="side"></div>
</div>

Answer 3

you can set style to the textbox if apply something like this: style="position absolute;top:80px;left:90px;" your are being explicit on where you want the textbox to be displayed so you specify the pixels and it should be inside a layer... it should work for you

input name="q" class="textbox" tabindex="1" onfocus="if (this.value=='search') this.value = ''" type="text" maxlength="80" size="28" value="search" style="position absolute;top:80px;left:90px">

Answer 4

Not being a CSS purist, I too would go the table route since I could do that in much less time than trying to get floated DIVs to line up correctly.

You could however use 3 DIVs floated left and sized appropriately to accomplish the same thing.

<div style="width: 25%; float: left;">Your content here.</div>
<div style="width: 50%; float: left;">Your content here.</div>
<div style="width: 25%; float: left;">Your content here.</div>