Il secondo DIV non si allinea, viene premuto Giù

Question

Cerco dappertutto e ho provato tutto quello che potevo, ma non riesco a rendere il mio secondo DIV allineato. Vedere codice qui sotto:

image on tinypic.com

Come potete vedere, ho aggiunto un bordo bianco in modo che possiamo vedere l'esatta dimensione. Il problema qui è con i pulsanti di social media DIV sulla destra.

Ecco il codice 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> 

Ed ecco il 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; 
}  

Ogni aiuto sarà molto apprezzato.

Cheers!

CSS AGGIORNAMENTO:

#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

Preferisco utilizzare display:inline-block anziché float quando possibile e ora sembra essere una di quelle volte. Sostituire i galleggianti con questi sulle due div principali dovrebbe fare il trucco. Le tue immagini tinypic non funzionano per me, ma prova questo jsfiddle e vedi se sta producendo i risultati che stai cercando. http://jsfiddle.net/k96BU/

Ho aggiunto un vertical-align:top in modo che fossero allineati correttamente.

Answer 2

Aggiunta di un float: left al #schcontainer dovrebbe risolvere il problema. Potresti dover avere overflow: hidden o qualche tipo di clearfix per il tuo #content_header in seguito.

Answer 3

#schcontainer vuole float:left sicuramente?