css - How can I get these two widgets to align horizontally using CSS selectors?

Question

I created an area in my WordPress theme where I can include a widget. Well, I included a social follow widget and I also included a Facebook Follow/Subscribe widget.

The problem is that the Facebook widget appears below the social widget -- and I'd like the social widget to be flush left, and the facebook widget to flush right.

Here is what it looks like on the website:

And here is the "general" Firebug of it:

I have tried to learn CSS, but I still get confused with selectors and the differences between text-align:left or float:left, etc. ... Here is what it looks like when you open up those "asides" in firebug:

I must have tried 30 different types of CSS rules and I cannot get that Facebook Follow widget to show up on the same line as the social widget, flushed right.

I can say that the one thing that I've tried that has worked for me has been this:

#social_sprites_widget-6 .ss {
text-align: left;
}
#social_sprites_widget-6 .widgettitle {
color: white!important;
text-align: left;
}

Lastly, here is what happens when I highlight the two "asides" and right click/copy html (not "inner html", which is similar):

<aside class="widget php-text catalyst-widget-area catalyst_hook_after_header" id="php- 
text-13"><div class="widget-wrap"><div class="php-textwidget"><div data-show-faces="false" 
data-colorscheme="dark" data-width="200" data-href="https://www.facebook.com/occupyhln.org" 
class="fb-follow fb_iframe_widget" fb-xfbml-state="rendered"><span style="vertical-align: 
bottom; width: 225px; height: 24px;"><iframe width="200px" scrolling="no" height="1000px" 
frameborder="0" name="f28a55d5f531d8" allowtransparency="true" title="fb:follow Facebook Social 
Plugin" style="border: medium none; visibility: visible; width: 225px; height: 24px;" 
src="http://www.facebook.com/plugins/follow.php?href=https%3A%2F
%2Fwww.facebook.com%2Foccupyhln.org&amp;show_faces=false&amp;width=200&amp;color_scheme=dark&
amp;app_id=499338670149736&amp;locale=en_US&amp;sdk=joey&amp;channel=http%3A%2
%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D26%23cb%3Df2e90aca0c1a8de%26origin%3Dhttp%253A%252F%252Fwww.occupyhln.org%252Ff3e71b0d8eec812%26domain%3Dwww.occupyhln.org%26relation%3Dparent.parent" class=""></iframe></span></div></div></div></aside>

That has gotten the social sprites and title to flush left. But I cannot do anything with the Facebook follow widget. Any help in eliminating this headache ... it's at http://www.occupyhln.org .. would be greatly appreciated!

Answer 1

You have 2 options to accomplish this:

Option 1: CSS:

    #wrap .Social.Sprites{ width:auto; }
    #wrap .php-text.catalyst-widget-area{ float:right;width:auto; }

both will be in the same line but you will lose the black background (since the background is part of the social icons widget), you will need to wrap both widgets on a div like this:

<div class="mySocialMediaWidgetArea">
/* social icons widget here*/
/* follow us widget here */
</div>

and add to the CSS .mySocialMediaWidgetArea{background:#000;}

Option 2: CSS

#wrap .php-text.catalyst-widget-area{
float: right;
width: auto;
margin: -80px 0 0 0;}

the key here its width:auto, you weren't able to use float or text-align to put them in the same line because both widgets have width:100%, i am using classnames instead of ID's since if you delete and create a new widget the ID will change and you will have to update the CSS in that case.