Aligning the Twitter and Facebook buttons

Issue with Social Media Button Alignment

I'm encountering a problem with aligning Twitter and Facebook buttons on my website.

The alignment seems to be off and I need some help fixing it.

Code Snippet

:

<span id="social">
    <a href="https://twitter.com/share" class="twitter-share-button" data-via="guillaumgregoir">Tweet</a>
    <div class="fb-like" data-href="http://csstooltip.com" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
</span>

:

#social {
    display: inline-block;
    margin-left: 24px;
}

div.fb-like {
    display: inline-block !important;
    margin-left: 100px;
    margin-top: -20px;
}
htmlcssbuttonalignmentsocial-networking

Answer №1

To eliminate the top margin in your CSS, consider using floats as shown below:

<div>
<div style='float:left;'>
--add a button here
</div>
<div style='float:left;'>
--add a button here
</div>
<div style='clear:both;'>
</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to alter CSS attributes dynamically without setting a limit on the number of changes that can be made?

In my current project, I am looking to add a feature that allows users to choose the color scheme of the software. While the choices are currently limited, I plan to implement a color picker in the future to expand the options available. So far, I have ex ...

htmlcssangular

The display/block feature will only function if the div element is contained within a table

I am facing an issue with hiding/showing two div elements alternatively. The code works perfectly when the divs are placed within a table, but fails when they are not in a table due to compatibility issues with Internet Explorer. I prefer not to use a tabl ...

javascriptjqueryhtml

Begin the jQuery ResponsiveSlides Slider with the final image in the <ul> list

Currently utilizing the responsiveSlides image slider from responsiveSlides on our website. This jQuery slider uses an HTML unordered list of images to slide through automatically. The issue I'm facing is that before the slider actually starts (meani ...

javascriptjqueryhtmlcss

What is the best way to remove a CSS style using JavaScript?

For my website automation using Selenium, I encountered a challenging dropdown that was not the standard native one but a custom-designed version. To tackle this issue, I needed to set its CSS class to hidden in order to access the native functionality smo ...

javascriptjquerycssseleniumselenium-webdriver

What steps can I take to ensure that the elements are in the same row instead of being displayed in three separate rows?

(I'm a beginner in web development and need some help) Is there a way to align elements into the same row instead of stacking them up in separate rows? I'm working on creating a header bar similar to the one on the Naive UI Documentation Website. ...

htmlcsstypescriptvue.js

Discover the name of a color using its HEX code or RGB values

Is there a way to retrieve the color name from RBG or HEX code using JavaScript or JQuery? Take for instance: Color Name RGB black #000000 white #FFFFFF red #FF0000 green #008000 ...

javascriptjquerycsscolors

When Safari injects elements that were previously hidden with display:none, they remain visible

Using the JS library MagnificPopup, I implement popups on my website triggered by a "read more" button. This library moves the html to display it in a different location and then injects it back when the popup is closed. While this functionality works seam ...

javascriptcsssafarimagnific-popup

What is the best way to split a semicircular border radius in two equal parts?

Is there a way to halve the yellow line or remove it from above the red box, while keeping it below? Can this be achieved using just HTML and CSS, or is JavaScript necessary? * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 1 ...

javascripthtmlcsscss-animations

Creating a Border Length Animation Effect for Button Hover in Material-UI

I'm currently exploring Material-UI and trying to customize a component. My goal is to add a 'Border Length Animation' effect when hovering over the button. Unfortunately, I have yet to successfully implement this animation as intended. For ...

javascriptcssreactjsmaterial-uicss-animations

How to execute a JavaScript function within a Jinja for loop

I am currently working on an HTML page where the variable schedule contains a series of sequential decimal numbers representing seconds. My goal is to develop a function in JavaScript/jQuery that can convert these decimal numbers into time format. However ...

javascripthtmljinja2

Creating a tabular layout using div elements and CSS styling

Here is the css and html code that I am working with: <style type="text/css"> .formLayout { background-color: #f3f3f3; border: solid 1px #a1a1a1; padding: 10px; width: 300px; border-radius: 1em; } ...

csshtml

Incorporate an ASP table within an ASP table to enhance data organization and presentation

Is it possible to create a dynamic ASP.NET table structure similar to the one demonstrated below by nesting tables inside table cells? <table> <tr> <td>[Image]</td> <td> <table> <tr> ...

c#htmlasp.nethtml-table

sidebar that appears upon the initial page load

I'm currently working on implementing a sidebar navigation panel for my website using JavaScript, HTML, and CSS. However, I am facing an issue where the sidebar automatically opens when the page is first loaded, even before clicking on the icon to ope ...

javascripthtmlcssnavigationsidebar

Create an HTML table to view JSON data from a cell on a map

Looking to transform the JSON data into a table by organizing the information based on supplier and product. Below is the JSON input and code snippet: $(document).ready(function () { var json = [{ "Supplier": "Supplier1", "Product": "O ...

javascriptjqueryhtmlarraysjson

Issues with javascript and php carousel functionality not performing correctly

I am currently in the process of creating a slideshow/carousel for a website. Recently, I implemented a PHP for-loop to iterate through a folder of images, allowing me to use the slideshow with an unspecified number of images. However, after making this ch ...

htmlphpjavascriptimage

Utilizing AJAX and PHP to enhance Zend_Config_Ini

As I develop my own CMS, I encountered a challenging issue that I couldn't find a solution for on Google... My dilemma lies in creating an edit_settings.php file using AJAX and PHP to integrate my Zend_Config_Ini for parsing and writing purposes with ...

phphtmlajaxzend-framework

Identifying identical web elements using Python Selenium through related attributes

Having attempted to solve this problem for the third time, I find myself unable to come to a final solution on my own. I would greatly appreciate it if someone could offer their insights on the issue at hand. Let's consider the following HTML structu ...

pythonhtmlpython-3.xseleniumxpath

Issues with Angular HTML failing to load correctly

Greetings, I am seeking assistance with an issue that has been challenging me for quite some time. As a newcomer to Angular JS, I may be overlooking something obvious. Here is the scenario: I am utilizing ng-repeat on a directive in the following manner: ...

htmlangularjs

What is the best way to create three buttons for selecting various parameters?

I have a code snippet where I want to assign different parameters to each button when clicked. However, despite my logic, the functionality is not working as expected. Can someone help me with the correct syntax? For example, if I click the "Start (Easy) ...

javascripthtmlbutton

PHP loaded HTML does not allow JavaScript to execute

My system includes an announcements feature where all announcements are retrieved from a database and displayed on the screen using Ajax and PHP. Below is the code snippet used to load each announcement onto the page: echo '<div id="announcements ...

javascriptphpjqueryhtmlajax