CSS Layout: levelling of 2 <divs> without <table>

The following HTML/CSS leaves my “this page in French” button towering above my FB like button. I have tried all sorts and probably tired my brain! I have tried using ‘clear:all;’ all over the place; ‘text-align’ did nothing for me; I have modified the ‘vertical-align; ???;’ in many different ways; the < a > was originally without surrounding < div >, but that left the FB too close even after various margins/paddings for the FB.

There’s probably a simple tutorial out there, if I could only find it :smiley:

The code below can be seen in action until I get it sorted, at the address in the code. But the longer I leave it unsorted the more irate will become the missus … :frowning:
I am using Mozilla FF 33.0 - hoping to make it work here before fighting with IE

<div style="width: 50%">
    <a title="French version" href="/fr.php"><img style="margin-bottom:5px; margin-right: 5px;" alt="French flag" src="/images/drapeau_fr.jpg"><span lang="FR" style="vertical-align:super;">Version fran&ccedil;aise</span></a>
 </div>
 <div class="fb-like" data-href="http://www.kirbyglass.com/index.php" data-layout="standard" data-action="like" data-show-faces="true" data-share="true" style="padding-left: 50%;"></div>

I’m not exactly sure what you’re looking for asking, but hopefully this helps:

This is not enough code to go off of. Do you have a live website? Are you just wondering why they are stacking vertically? If so, it’s because the div containing the french text is not floated (or display:inline-block or table-cell).

Your question left out the specifics. Please rephrase and also give us a FULL RECREATEABLE version of your problem. If we can’t recreate your problem with the code you provide, then we cannot supply an answer.

1 Like

Ryan the address is in the data-href of the snippet of code the OP posted :smile:

As others have said we need to know what you want it to look like before we can help properly.

If you want all the buttons on one line then you can use display:inline-block and just space out with margins much as the example Lauren posted above.

You do have a number of other issues on that page especially as the screen gets down to about 900px but lets do one thing at a time :slight_smile:

Good catch. I just saw some HTML with divs in it and I dismissed looking at it.

I am looking for an alignment, probably across the top, as the second element is twice as high as the first. I had not thought of ‘inline-block’ - never used it before :smile: First time for everything! Whatever I do, my wife must approve! So I’ll start with that - probably tonight. I’ll keep you pôsted.

As for mobile views, I am just beginning to get my toes wet on that one, and would welcome any advice.

Solved it using ‘display: table’ and ‘display:table-cell; vertical-align: top’ as per DIV height problem. Thanks for all your help - it was because I was looking to do it with ‘inline-block’ that I came across this solution. :smile: and the wife likes it like that!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.