CODEWITHSUNDEEP
htmlcssalignment
Alex Pereira
Alex Pereira

Reputation: 170

Second DIV won't align, gets pushed down

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

Upvotes: 6

Views: 12636

Answers (3)

Ryan Elkins
Ryan Elkins

Reputation: 5797

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.

Upvotes: 13

danwellman
danwellman

Reputation: 9253

#schcontainer wants float:left surely?

Upvotes: 0

Leo
Leo

Reputation: 5286

Adding a float: left to your #schcontainer should fix the issue. You might have to had overflow: hidden or some kind of clearfix to your #content_header afterward though.

Upvotes: 0

Related Questions