दूसरा डीआईवी संरेखित नहीं होगा,

Question

नीचे धक्का दिया जाता है मैं हर जगह खोज करता हूं और जो कुछ भी कर सकता था, कोशिश करता हूं, लेकिन मैं अपना दूसरा डीआईवी संरेखण नहीं कर सकता। नीचे दिए गए कोड देखें:

image on tinypic.com

आप देख सकते हैं, मैं एक सफेद सीमा को शामिल किया है ताकि हम सटीक आकार देख सकते हैं। यहां समस्या सही है सोशल मीडिया बटन डीआईवी के साथ।

यहाँ एचटीएमएल है:

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

और यहाँ सीएसएस

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

किसी भी मदद की बहुत सराहना की जाएगी है।

चीयर्स!

UPDATED सीएसएस:

#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

जब संभव हो तो फ्लोट के विपरीत display:inline-block का उपयोग करना पसंद करते हैं और अब उन समयों में से एक लगता है। दो प्राथमिक divs पर इनके साथ फ्लोट को बदलने से चाल चलनी चाहिए। आपकी tinypic छवियां मेरे लिए काम नहीं कर रही हैं, लेकिन इस jsfiddle को आजमाएं और देखें कि यह आपके द्वारा देखे जा रहे परिणामों का उत्पादन कर रहा है या नहीं। http://jsfiddle.net/k96BU/

मैंने vertical-align:top जोड़ा ताकि वे ठीक से ठीक से लाइन किए जाएंगे।

Answer 2

एक float: left करने के लिए अपने #schcontainer इस मुद्दे को ठीक करना चाहिए जोड़ा जा रहा है। हो सकता है कि आपको overflow: hidden या बाद में अपने #content_header पर किसी प्रकार का स्पष्ट फ़िक्स होना पड़े।

Answer 3

#schcontainer निश्चित रूप से float:left चाहता है?