Question

I search everywhere and tried everything I could, but I cannot make my second DIV align. See code below:

image on tinypic.com

As you can see, I have added a white border so that we can see the exact size. The problem here is with the social media buttons DIV 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’s 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 will be greatly appreciated.

Cheers!

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 seems to be one of those times. Replacing the floats with these on the two primary divs should do the trick. Your tinypic images aren’t working for me but try this jsfiddle and see if it’s producing the results you are looking for. http://jsfiddle.net/k96BU/

I added a vertical-align:top so they would be lined up properly as well.