Segundo DIV no se alinea, se empuja hacia abajo

Question

Busco en todas partes e intenté todo lo que pude, pero no puedo hacer que mi segundo DIV se alinee. Ver código de abajo:

image on tinypic.com

Como se puede ver, he añadido un borde blanco para que podamos ver el tamaño exacto. El problema aquí es con los botones de redes sociales DIV a la derecha.

Aquí está el código HTML:

<div id="content_header"> 
    <div id="schcontainer" class="schcontainer"> 
     <%= form_tag({:controller => 'list', :action => 'index'}, :id => 'searchfrm') do %> 
      <div id="searchboxwrap"> 
       <%= text_field_tag(:query, value=@query, options={:size => "47", :placeholder => "Enter a product name..."}) %> 
       <%= text_field_tag(:selectedpage, value=@page, options={:class => "hiddenelement"}) %> 
      </div> 
      <%= submit_tag("") %> 
     <% end %> 
     <div class="clear"></div> 
    </div> 
    <div id="mediabuttons"> 
     <div class="fb-like" data-send="false" data-layout="button_count" data-show-faces="false"></div> 
     <div><a href="https://twitter.com/share" data-url="<%=renderFullUrl%>" data-count="horizontal" class="twitter-share-button" data-size="small">Tweet</a></div> 
     <div class="g-plusone" data-size="medium"></div> 
     <div><script src="//platform.linkedin.com/in.js" type="text/javascript"></script><script type="IN/Share" data-counter="right"></script></div> 
    </div> 
</div> 
<div class="clear" id="fb-root"></div> 

y aquí está la CSS

#content_header{ 
    width:100%; 
    background-color:#333333; 
    border-bottom: 1px solid #999999; 
    -webkit-box-shadow: 0 0 3px 0 #000; 
    -moz-box-shadow: 0 0 3px 0 #000; 
    box-shadow: 0 0 3px 0 #000; 
    padding: 10px 10px 10px 10px; 
    height:35px; 
    vertical-align: top; 
} 

#schcontainer{ 
    width:48%; 
    border: 1px solid #FFFFFF; 
} 

#mediabuttons{ 
    width:39%; 
    float:right; 
    text-align:right; 
    border: 1px solid #FFFFFF; 
} 

#mediabuttons div{ 
    margin:0; 
    padding:0; 
    width:25%; 
    float:left; 
} 


.clear { 
    height: 0; 
    font-size: 1px; 
    margin: 0; 
    padding: 0; 
    line-height: 0; 
    clear: both; 
}  

será muy apreciada Cualquier ayuda.

¡Salud!

CSS ACTUALIZADO:

#content_header{ 
    float:left; 
    overflow:hidden; 
    width:100%; 
    background-color:#333333; 
    border-bottom: 1px solid #999999; 
    -webkit-box-shadow: 0 0 3px 0 #000; 
    -moz-box-shadow: 0 0 3px 0 #000; 
    box-shadow: 0 0 3px 0 #000; 
    padding: 10px 10px 10px 10px; 
} 

Answer 1

Prefiero usar display:inline-block en lugar de flotadores cuando sea posible y ahora parece ser uno de esos momentos. Reemplazar los flotadores con estos en los dos divisores principales debería hacer el truco. Sus imágenes tinypic no funcionan para mí, pero pruebe este jsfiddle y vea si está produciendo los resultados que está buscando. http://jsfiddle.net/k96BU/

He añadido un vertical-align:top para que se alineen correctamente también.

Answer 2

Adición de un float: left a su #schcontainer debería solucionar el problema. Puede que tengas que tener overflow: hidden o algún tipo de clearfix en tu #content_header después.

Answer 3

#schcontainer quiere float:left seguramente?