Css Выровнять по левому краю, по центру и справа, не работает

Question

Вот что я пытаюсь сделать: Я хочу CSS, чтобы показать дивы, как это:

Left (логотип выставки здесь) Центр (показать слева, в середине, правый дивы здесь вместе) право (показать возвращение здесь)

Я следующий код:

<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> 

здесь CSS я до сих пор:

#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

Если вы поставите другой DIV, который содержит покинул, середины и права yyou DIV могут попробовать что-то как это: 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; удаляет элементы из обычного потока документа, поэтому вы не можете их float.

Вот пример макета, который вы пытаетесь достичь с помощью float и один с использованием position:absolute;