Position the text alongside the Facebook emblem

I am having trouble getting the text Follow Us to align on the far right next to the Facebook Icon. I added the float:right property, but it is not working as expected.

Here is the code snippet:

<a href="#" target="_blank" style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; color:#999999">Website Designed and Developed By <strong><font style="color: #00FF00"></font><font style="color: #666666"></font></strong>, Web Design Blackburn, Web Design Lancashire<span><h1 style="float:right">Follow Us</h1></span></a>

This issue is occurring on the following site - . I am trying to make changes to the footer section.

Here is a screenshot of the footer for reference

Since the footer is hardcoded, customization will be necessary to fix this issue.

htmlcss

Answer №1

@java11 I couldn't attach an image to my comment, so I'm sharing it here as an answer because I think it will help with your issue too.https://i.sstatic.net/yXv2i.png

Here's the code snippet:


     <li><a href="https://en-gb.facebook.com/audleytyres/">
        <i class="fa fa-facebook"> FOLLOW US </i></a>
     </li>

Answer №2

Place your logo and text inside an a tag (link) with the styling of float:right; and include display:inline;

For instance: 

<a href="#" style="float:right;">
    <i class="fa fa-facebook" style="float:left;"></i>
    <span style="display:inline; margin-left:5px;">FOLLOW US</span>
</a>

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

Seeking help with h2 headings, nested hyperlinks, and clickable images

Attempting to tackle a homework question today. This is the task at hand.... List a variety of foods in the following categories: Sandwiches, Drinks, Desserts. Use h2 tags to create these categories. Under each category, create a nested list that inc ...

htmlcsshyperlink

What is the best way to limit the top margin for a fixed element?

Recently, I came across this code snippet: jQuery(document).ready(function($){ $( window ).scroll(function() { var current_top = $(document).scrollTop(); var heights = window.innerHeight; document.getElementById("sHome").styl ...

jquerycssscrollfixed

Submitting user inputs from an HTML form into a MySQL database using PHP

I've successfully put together an HTML form that is meant to capture user input data and insert it directly into a table within mySQL. newuser.php file <?php //including the connection page include('./DB_Connect.php'); //create a n ...

phphtmlmysqlforms

Footer at the bottom and a sticky navigation bar

I have experimented with various CSS guides in order to place the footer at the bottom of the page, and I have found the example below to be the simplest method. html, body, #root { height: 100%; } #root { display: flex; flex-direction: column; } ...

htmlcss

Steps for preventing form submission when the username is unavailable

After checking the availability of the user name, I encountered an issue where the form still gets submitted even if the username is not available. Updated Code: <SCRIPT type="text/javascript"> $(document).ready(function(){ $("#emailch").change(fu ...

phpjavascriptjqueryhtmlajax

Unique Tags and Javascript: A customized approach

In the process of developing a web application, I am aiming for high standardization. To achieve this goal, I plan to utilize custom namespace tags that will be modified by JavaScript based on their functionality. For instance: <script type="text/java ...

javascripthtmlxml-namespaces

Avoid automatic background resizing to match the full width of the header text

I've been trying to use CSS to style my <h1> element in a specific way, but it seems the default browser behavior is getting in the way: https://i.sstatic.net/oRR5N.png Despite my efforts, the browser continues to display it like this: https: ...

htmlcss

Create paper "cut" borders using HTML canvas or pseudo-elements

As a designer with a penchant for pain, I am striving to achieve an "art nouveau" aesthetic on paper for my NextJS project with MUI as the main design solution. Despite the abundance of CSS in the background, I am faced with the challenge of creating inner ...

csscanvasnext.jscss-selectorsborder

Is it possible for browsers to handle PUT requests using multipart/form data?

Is it common for HTML forms to not support HTTP PUT requests when submitted from certain browsers like Google Chrome? <form id="#main-form" action="http://localhost:8080/resource/1" method="put" enctype=" ...

javascripthtmlformsrest

Overridden CSS rules

Having a slight CSS dilemma. Within my webpage's html, I have the following structure: <div class='box-div'> <div>Entry 1</div> <div class='hide'>Entry 2</div> </div> Here is my associated ...

htmlcsscss-selectors

How do I go about uploading the code as instructed on the platform's e-commerce details page?

.mk_01{ color: #000000; font-size: 30px; font-style: normal; font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; text-align: center; } .mk_02{ color: #000000; fon ...

htmlcss

Manipulate elements by adding and removing classes sequentially based on an array

Previously, some had difficulty understanding my question. I have an array of variables representing the ids of 5 divs. My goal is to change the color of each div sequentially for a brief moment before reverting back, mimicking the behavior of traffic ligh ...

javascriptjquerycss

Align two spans within a div using the margin auto property

I often find myself struggling with the basics, it seems like I can't figure this out. I want the two spans to be centered within the div with auto margins... https://jsfiddle.net/5k4pnmf7/ <div class='foo'> <span class='bar& ...

htmlcss

Having trouble getting the CSS footer from cssstickyfooter.com to function properly

I tried implementing some basic CSS from to create a sticky footer that remains at the bottom of the page regardless of content length. However, I am encountering a problem with the footer not behaving as expected. There are actually two issues with the f ...

cssfootersticky-footer

CSS problem: Footer encroaching on the content above

For more information, please visit this link When the window is minimized, the footer overlaps the content above it. Despite spending hours trying to fix this issue, I have not been successful. View when maximized: here View when minimized: here Even af ...

cssoverlap

CSS - Retain z-index until the transition is complete

Looking at this basic grid layout: <html> <head> <style> .grid { display: grid; grid-gap: 5px; grid-template-columns: repeat(13, 3fr); } .box { position: relat ...

htmlcss

Change the position of buttons inside a Bootstrap 4 modal to the left side

I am currently working with a modal in bootstrap 4 and I would like to reposition the 'cancel' and return buttons to the left side of the modal. I have set up a js fiddle for reference: https://jsfiddle.net/andrewsolis/08v6znox/. Below is my HTML ...

htmlcssbootstrap-modalbootstrap-4

Exploring the benefits of using Div and semantic elements in web

After spending more than two months learning HTML, I still find myself uncertain about the most practical coding approach. Despite knowing that it's important not to overthink it, I often wonder if I should stick with simplicity or add extra elements ...

htmlcss

Concealing the content of multiple items through sorting with the help of jquery

I need help with hiding the content of all elements while dragging or sorting the list. Can someone assist me with this? Here is my working fiddle. My jQuery code used in the fiddle is: $( function() { $( "#sortable" ).sortable(); $( "#sortable" ).disable ...

jqueryhtmlcssjquery-ui

Slight Misalignment of Elements

I am attempting to align two corners of an element so that they perfectly match the corners of another element. In simpler terms, I am aiming to synchronize the corners of one element with those of another element. Below is the code snippet: ... When y ...

javascripthtmljquerycss