İkinci DIV hizalanmıyor, aşağı itiliyor

Question

Her yerde aradım ve yapabileceğim herşeyi denedim, ancak ikinci DIV hizalamayı yapamıyorum. Aşağıdaki kod bakın:

image on tinypic.com

Gördüğünüz gibi biz tam boyutunu görebilirsiniz böylece, beyaz sınır ekledik. Sorun, sağdaki sosyal medya düğmeleri DIV ile.

İşte HTML var:

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

Ve burada bir Yardım büyük takdir edilecektir

#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; 
}  

CSS bu.

Şerefe!

GÜNCELLEME CSS:

#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

Mümkün olduğunda şamandıraların aksine display:inline-block kullanmayı tercih ediyorum ve şimdi bu zamanlardan biri gibi görünüyor. Şamandıraları bunlarla iki birincil div üzerinde değiştirmek hile yapmalıdır. Senin tinypic görüntüleri benim için çalışmıyor ama bu jsfiddle deneyin ve aradığınız sonuçları üretip üretmediğini görün. http://jsfiddle.net/k96BU/

vertical-align:top ekledim, böylece düzgün şekilde dizilmişlerdi.

Answer 2

senin #schcontainer sorunu çözecektir bir float: left ekleme. overflow: hidden ya da #content_header numaranıza bir çeşit düzeltme yapabilmeniz gerekebilir.

Answer 3

#schcontainer kesinlikle float:left istiyor?