The second DIV will not align, is reset

Question

I search everywhere and tried everything I could, but I can’t make my second DIV. See the following code:

image on tinypic.com

As you can see, I added a white frame so that we can see the exact size. The problem here is in the social networks of the DIV buttons on the right.

Here's the 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> 

And here is the 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; } 

Any help would be greatly appreciated.

Hurrah!

UPDATED 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

I prefer to use display:inline-block , as opposed to floats, when possible, and now it seems like this is one of those cases. Replacing floats on them with two primary divs should do the trick. Your tinipy images do not work for me, but try this jsfiddle and see if it produces the results you are looking for. http://jsfiddle.net/k96BU/

I added vertical-align:top so that they are properly aligned.

Answer 2

Adding float: left to your #schcontainer should fix the problem. You might have to have overflow: hidden or some kind of clearfix for your #content_header , though.

Answer 3

#schcontainer wants float:left sure?