Css align left, center and right, not working

Question

Here is what i am trying to do: I want the css to show divs like this:

Left(show logo here) Center(show left,mid,right divs here together) right(show return here)

I have following code:

<div id="top" class="top">                
                <asp:Panel ID="Srch" runat="server" EnableViewState="False" Wrap="False">
                    <div id="logo">
                        <asp:ImageButton ID="logo" runat="server" ImageUrl="/images/logo.gif" />
                    </div>
                    <div id="left"></div>
                    <div id="mid">
                        <asp:textbox id="txtSearch" runat="server"></asp:textbox>
            <asp:button id="find" runat="server" Text="find"/>
                    </div>
                    <div id="right"></div>                    
                    <div id="return">
                        <asp:HyperLink ID="i" runat="server" Text="return"></asp:HyperLink>
                    </div>
                </asp:Panel>                                
            </div>

here is css i have so far:

#Srch
{
    position:absolute; 
    top:10px;   
    height: 35px;
    float:left;
    margin-left:19px;
    width: 100%;
    border:thick solid black; 
}
#left
{
    position:absolute;
    background:  url(/images/searchBG_left_10x35.png) repeat-x;
    top: 15px;
    width: 10px;
    height: 35px;
    left:50%;    
}
#mid
{
    position:absolute;
    background: url(/images/searchBG_mid_1x35.png) repeat-x;
    top: 15px;
    height: 35px;
    float:left;
}
#right
{
    position:absolute;
    background: url(/images/searchBG_right_10x35.png) repeat-x;
    top: 15px;
    width:9px;
    height:35px;
    float:left;
}
#return
{
    position:absolute;
    float: right;
    top: 15px;
    font-size: 11px;
    font-weight: bold;
    font-family: Arial;
    text-decoration: underline;
    color: Blue;
}
#logo
{  
    position:absolute;
    float: left;   
    left: 0px;
    bottom: 0px;
}
#txtS
{
    width: 285px;
    height: 18px;
    position: relative;
    top: 8px;
    float: left;
    display: inline;
    font-size: 11px;
    font-weight: bold;
    font-family: Arial;
    border: 0px;
    color: #000000;
    margin-right:3px;
}
#find
{
    position: relative;
    top: 8px;
    float: left;
    display: inline;
    width: 50px;
    height: 18px;
    cursor: pointer;
}

Answer 1

If you put another div that contains the left, mid and right div's yyou can try something like this: HTML

<div ID="Srch">
    <div id="logo"> </div>
    <div id="medio">
        <div id="left"> </div>
        <div id="mid"> </div>
        <div id="right"> </div>
    </div>
    <div id="return"> </div>
</div>

CSS

#Srch{
    padding-left: 20em;
    padding-right: 22em;
}

#logo{
    float: left;
    width: 20em;
    margin-left: -20em;
}

#medio{
    float: left;
}

#return{
    float: left;
    width: 22em;
    margin-right: -22em;
}

Answer 2

position:absolute; removes elements from the regular flow of the document, so you can't float them.

Here is an example of the layout you are trying to achieve using float and one using position:absolute;