Fixed footer featuring a Facebook like button frame

I am looking to achieve something like this

However, my current setup looks like this

I have attempted various solutions but haven't made any progress. What steps should I take?

View the code on this JSFiddle link

Some definitions in my code include:

#footer {
            padding: 20px;
            background-color: #000;
            color: #fff;
            font-size: 12px;
}

As well as this iframe element:

<iframe src="FACEBOOKURL&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:20px;" allowTransparency="true">
</iframe>
javascripthtmlcssfacebook-likesticky-footer

Answer №1

try using the CSS property float with a value of left.

<div style="float:left">text</div>
<div style="float:left">iframe</div>

ensure that the width of the iframe can adjust to fit your available space

here is an example - http://jsfiddle.net/im4aLL/xjJsk/10/

Answer №2

There's no need to use the float property on the elements. A more straightforward solution is simply to remove the width:100% from the iframe.

Here's the markup:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com/Eurekavi&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden;  height:20px;" allowTransparency="true">

Check out the working demo : http://jsfiddle.net/xjJsk/23/

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

A step-by-step guide on retrieving information from a span and em element with Beautiful Soup

Currently, I am developing a code that is responsible for extracting data from various web pages. # Here's the content of task.py import requests from bs4 import BeautifulSoup url = ('https://www.naukri.com/job-listings-Python-Developer-Cloud-A ...

pythonhtmlweb-scrapingbeautifulsoup

Struggling to align the h1 tag with a p tag on the same line

How can I align the balance to the upper right-hand corner of my website? I'm new to HTML and CSS and struggling to get the p tag next to the h1 tag. I've tried using display inline for the h1 tag and float right for the p tag, as well as setting ...

javascripthtmlcss

Is it possible to dispatch an async action when a route changes in React Router and Redux?

I am working on a universal react app with redux and react-router integration. My app has multiple routes such as: /2016 /2015 /2014 /2013 and so on. Each route requires fetching data from an API. Currently, I am using <Link> elements in the Navi ...

javascriptreactjsreact-routerredux

Tips for retrieving the index within the upload file list on DropzoneJS

I have been experimenting with dropzoneJS and I am looking for a way to retrieve the index of a specific file in the list. This is because I need to remove an element from an array that is associated with the file I uploaded. To do this, I created an arra ...

javascriptarraysuploaddropzone.js

Unable to make a POST request using axios

I'm having trouble populating a table using vue.js and axios in my visual studio project. Every time I run the solution, I see an empty table with just the heading Title. I experimented with another POST request method but unfortunately, it didn&apos ...

c#htmljsonvue.jsaxios

jQuery TextExt - Trouble with setting the URL for Ajax autocomplete

Currently, I am utilizing the jQuery TextExt plugin for autocomplete. While using its example json url (data.json), everything functions as expected without any issues. However, when attempting to use my own custom url, similar to the one below: $('# ...

javascriptjqueryajaxjquery-autocompletejquery-textext

Technique for Retrieving Hyperlinks from HTML Resulting in Repetitive

I have been working on a web-crawler and encountered an issue while parsing the HTML content to extract links. The method I am using seems to be returning duplicate links, even though the HTML content is correct. Here is the code snippet: public static Ar ...

javahtmlmethodshyperlink

The event fails to propagate up to the parent component

I have a project structure set up as follows: https://i.stack.imgur.com/bvmK5.jpg The todo-form component triggers the created event and I am looking to handle this event in the todos component. todo-form.component.html: <form class="todo-form" ( ...

javascriptangularevent-handlingeventemitter

Display the content of a Vue file directly on the webpage

I am currently developing a website to showcase UI components using plain CSS. The project is built with Vue, utilizing standard HTML and CSS. One of the key features I am working on is providing users with two views for each component: 'Preview' ...

javascriptvue.js

What is the best way to obtain the client id of an ASP control (_lblCouncils) within a repeater control?

Is there a way to obtain the client id of the asp control (_lblCouncils) located within a repeater control? <ItemTemplate> <div id="NotificationDiv"> <asp:Label ID="_lblRoleType" Text='<%#Eval("RoleType")%>&apos ...

javascriptasp.net

Calculating a 30-minute interval between two given times using JavaScript/jQuery

My goal is to generate a list of times between a specified start and stop time, with half-hour intervals. While I have achieved this using PHP, I now wish to accomplish the same task using JavaScript or jQuery. Here is a snippet of my PHP code which may ...

javascriptjquery

Guide on showcasing an array of objects in a table using react

Recently, I have been diving into learning React. One of the challenges I encountered was setting my state to an array of objects and trying to display them in a table on the page with each object on a separate row. While researching, I came across the map ...

javascriptarraysreactjsmappingsetstate

Fetching properties from an array of components

Hello, I'm currently working on a React component and facing an interesting challenge. Let's say I have an array structured like this: let data: {title: ReactNode}[] = [ {title: "test1"}, {title: <Component1 title="test2& ...

javascriptreactjsarraystypescriptjsx

Tips on aligning three divs horizontally within a container while maintaining a height of 100%

UPDATE: The alignment has been corrected by adding floats. However, the height still doesn't fill 100%. Check out the new look: Image Link In my footer container, I want to arrange 3 columns (colored green, white, and red for clarity). Currently, the ...

javascriptjqueryhtmlcss

Managing data presentation using various checkboxes in a React Js application

I am currently working on an app that displays a list of cars to the user upon component load after fetching data from a GET API. The page also contains multiple checkboxes for filtering the displayed data. While I am able to filter results based on the se ...

javascriptreactjscheckboxfilter

Can a value of a variable be "stored" in NodeJS?

I am working on a website that allows clients to make their site go live by setting var live = true;. Once this variable is set, certain webpages will display. I would prefer not to store the live variable in a database as creating a collection solely fo ...

javascriptnode.jsmongodbexpressmongoose

Align content to the bottom using Bootstrap 4

Looking for help with aligning content to the middle and bottom on a full-page bootstrap layout? The first page has a background image in the first div, and a darker layer on top in the second div. <div class="h-100 w-100"> <div class="h-100 w-10 ...

htmlcsstwitter-bootstrapflexbox

the text input remains fixed in size and does not resize

Visit the page and scroll down to find a section located next to the "Directions" button that contains an input field. This input field allows you to enter an address and utilize Google Maps for navigation. One puzzling aspect is that regardless of what ...

htmlcssinput

What is the best way to organize and structure a node.js project for modularity?

In the process of developing a node.js project, I am adhering to the class constructor pattern as shown below: function my_class(x,y){ this.x = x; this.y = y; } The foundation of the project lies within the main.js file. It is imperative that any ...

javascriptnode.jsrequiremodularity

What is the method to showcase the value stored in the "username" table?

I came across this code online and attempted to include a column with the "username" value. However, I am facing an issue where it is not displaying the username value from the database in the PHP table. <?php $no = 1; $tampil = mysql_query("SELE ...

phphtmlmysql