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

Tags: css,css3

Problem :

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:

My widget area

And here is the "general" Firebug of it:

Firebugged Widget area

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:

Firebugged asides in the widget area

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="" 
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;" 
amp;app_id=499338670149736&amp;locale=en_US&amp;sdk=joey&amp;channel=http%3A%2" 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 .. would be greatly appreciated!

Solution :

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 */

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.

    CSS Howto..

    CSS: how to add white space before element's content?

    How to add text using css in textarea? [closed]

    How to have this horizontal CSS based navigation menu work properly?

    How to control spaces/margin between bars?

    sidebar is under the openlayers map how to set css

    How does one style element within a label say?

    how to make dropdown menu using html & css

    How to retrieve the real height of a #div (including overflowed parts)

    how to fix closure compiler error on css({ float: 'left' }) [duplicate]

    How to prevent CSS/Javasript on specific selectors using Id?

    Awkward gap between menu items. How to fix?

    How to apply CSS to HTML body element?

    How does google elegantizr work?

    How to enlarge a div without moving other elements

    How can I set all columns to be the same height? [duplicate]

    I applied CSS auto-resizing to image, now how do I push it to the background?

    toggleClass: How does this CSS work?

    How to disable IE11 WebBrowser control scaling

    How can I use development tools to find css class of a plugin item

    How to move a span after an img?

    (CSS) How to Shorten CSS code

    In CSS how to achieve, two cells with auto width in fixed width parent, with priority to see content in second cell and with ellipsis at first cell?

    Responsive design: How to open links in a modal window for desktop browsers, but not on a mobile device?

    How to override a css !important property using jQuery with transitions

    How do I make an image shrink and grow according to re-sizing the browser.

    How to style Anchor in GWT?

    How to make this arrow in CSS only?

    How to style an add to cart

    How to time the effect of a css look in javafx?

    How to use a custom Style Sheet in WordPress