Is there a way to position the logo icons on the right side of the footer?

My goal is to connect social media platforms with their respective logos, and I'm encountering an issue. The problem arises when attempting to align the list items to the right of the footer.

<footer>
  <div class="footer-wrapper">
    <ul><a href="">HOME</a></ul>

    <div class="footer-link-wrapper">
      <ul><a href="">ABOUT</a></ul>
    </div>

    <div class="footer-link-wrapper">
      <ul><a href="">CATCH UP</a></ul>
    </div>
    <div class="footer-media-links">
      <ul>
        <li>
          <a href="http://www.facebook.com">
            <ion-icon name="logo-facebook"></ion-icon>
          </a>
        </li>
        <li>
          <a href="https://www.instagram.com/sott_brand/?hl=en">
            <ion-icon name="logo-instagram"></ion-icon>
          </a>
        </li>
        <li>
          <a href="https://www.pinterest.com/sott_brand/_saved/">
            <ion-icon name="logo-pinterest"></ion-icon>
          </a>
        </li>
      </ul>
    </div>

  </div>
</footer>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea8385848389858499aadec4dfc4dbdac7da">[email protected]</a>/dist/ionicons.js"></script>

htmlcss

Answer №1

To align the items on the right side of your footer, you can implement this CSS code.

.footer-media-links {
    float: right;
}

Answer №2

.footer-media-links ul {
  display: flex;
  list-style: none;
  justify-content: flex-end; /* aligns the items to the right side */
}

Answer №3

I made some tweaks to your HTML and incorporated a fresh set of CSS styling... Hope you like the changes :)

* {
    box-sizing: border-box;
  }
  
.column {
    float: left;
    width: 50%;
    padding: 10px;
  }

  .column #icons
  {
      float:right;
  }

  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  li
  {
      list-style-type: none;
      display: inline;
      margin: 10px;
  }
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Footer</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="row">
        <div class="column">
            <ul>
                <li><a href="">HOME</a></li>
                <li><a href="">ABOUT</a></li>
                <li><a href="">CATCH UP</a></li>
            </ul>
        </div>
        <div class="column">
            <div id="icons">
                <ul>
                    <li>
                        <a href="http://www.facebook.com">
                            <ion-icon name="logo-facebook"></ion-icon>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.instagram.com/sott_brand/?hl=en">
                            <ion-icon name="logo-instagram"></ion-icon>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.pinterest.com/sott_brand/_saved/">
                            <ion-icon name="logo-pinterest"></ion-icon>
                        </a>
                    </li>
                </ul>
            </div>

        </div>
   </div>

    <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fdafa6aeada3b2af901daba6aea5aca7aaa2">[email protected]</a>/dist/ionicons.js"></script>
</body>

</html>

Wishing you a fantastic day ahead!

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

jQuery: Eliminate the inline display property of "none"

Trying to figure out how to remove inline styles added by jQuery on hover from the current menu item in the navigation. I want the current menu item to remain visible even after hover, but jQuery is setting it to display:none. I attempted to add "display: ...

jquerycssmenunavigationinline-styles

CSS class malfunction - various classes with identical functions

I'm new to the world of web development and design, embarking on a journey to learn all I can in these fields. Recently, I attempted to create unique hover styles for each menu button within my CSS classes-based menu list. However, I encountered an i ...

htmlcss

What is the reason behind the content of a div tag not hiding while the content of a p tag does

<html> <head> <title>How to make a div content disappear when clicked?</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <scrip ...

javascriptjqueryhtml

What methods does the W3C CSS Validator use to recognize a CSS3 document?

Help Needed! Can someone tell me how to specify a CSS3 file for validation by the W3C? In HTML5, we use <!DOCTYPE html>, but what should we use in a CSS file? Whenever I try to validate my CSS file containing CSS3 elements like @font-face and box- ...

cssdoctypew3c-validation

Is there a way to retrieve the href attribute from an <a> tag using PHP?

Similar Question: Retrieving the href attribute of an Anchor Element Provided hyperlink $link="<a href='test.php'>test</a>"; Is there a way to extract href and anchor text using PHP? ...

phphtml

Tips for creating a dynamic variable for an object key in jQuery to streamline your code

Utilizing the TweenMax library, I am adding styles to a div while scrolling. However, I am facing a challenge where I need different styles based on varying page resolutions. To address this issue, I implemented an if condition. Is there a way I can use a ...

javascriptjquerycssgsap

Storing the value of the current vertical scroll position in a variable using jQuery

I'm currently dealing with a challenge that involves using the value of (window).scrollTop() as a crucial variable in my project. What I aim to accomplish is to retrieve and utilize the specific scroll value at a particular moment within an if stateme ...

javascriptjquerycssscopescrolltop

What causes the shift in the position of the div element?

I have been struggling with a problem in my code. Whenever I hover over this element, it rotates as intended but it also changes its position. I can't figure out why this is happening. Can someone please help me debug this? I would greatly appreciate ...

htmlcsstransition

What could be causing the calendar icon to not display in the table cell?

I've been working with the Bootstrap date picker inside a table, and I'm having trouble getting the date picker icon to display using the fas fa-calendar-alt css class. <td> <input type="text" id="expirydate{{$index}} ...

htmlcssangularjsdatepickerfont-awesome

How can I show two unique chart modals simultaneously?

Below is the chart that I am currently working on: https://i.stack.imgur.com/bHSj6.png While I am able to display the charts separately, I am encountering difficulties when trying to display both of them on the same chart line. <!DOCTYPE html> < ...

htmlcsscanvascharts

Resolving the Complete Cover Background Image problem

My current website has a full cover background image implemented using the following code: #back{ /* #back is a div */ position:absolute; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; backgroun ...

cssbackground-image

Can someone explain the function of statements such as (function () { // code; }.call(this)); within a JavaScript module?

By utilizing the Function.prototype.call() method, it becomes possible to create a function that can be applied to various objects. I delved into the code of , which had been minified and required to be un-minified for examination. The structure of the co ...

javascripthtmlnpmminifiedjsfunction.prototype

Guide to creating intricate animations using a CSS/JS user interface editor

Is there an easy way to create complex animations without blindly tweaking keyframes? I'm searching for a tool or editor that can generate the necessary animation code, similar to this example: https://codepen.io/kilianso/pen/NaLzVW /* STATE 2 */ .scr ...

javascriptcssanimationtransition

When the user clicks, the template data should be displayed on the current page

I need help with rendering data from a template on the same HTML page. I want to hide the data when the back button is clicked and show it when the view button is clicked. Here is my code: <h2>Saved Deals</h2> <p>This includes deals wh ...

javascripthtmlmeteormeteor-helper

Primeng - Concealed dropdown values within a scrollable table header

Recently, I integrated Primeng p-table with a filter and frozen column feature (with one column being fixed while the others are movable). However, I encountered an issue with the select dropdown in the header. When I try to open the dropdown, the values a ...

javascriptcssangularprimengprimeng-turbotable

What is the best way to overlay several hidden links on a single image using HTML?

Currently working on a project using Flask and I am interested in creating an interactive image where clicking on different sections will navigate to unique links. Is this achievable? Any guidance or resources on how to implement this feature would be mu ...

htmlimagelayoutclick

Programmatically simulate a text cursor activation as if the user has physically clicked on the input

I have been attempting to input a value into a text field using JavaScript, similar to the Gmail email input tag. However, I encountered an issue with some fancy animations that are tied to certain events which I am unsure how to trigger, illustrated in th ...

javascripthtmlcssinputclick

Create custom styles for Android applications using CSS or themes programmatically

As I work on developing an application, I am interested in implementing a unique approach... To retrieve a CSS file from the server and apply it to the activity layout. To create a string file for styling or theming and integrating it into the layout. I ...

androidcssthemes

Retrieve the most recent information from the database based on a specific column

Is there a way to retrieve only the most recent row from each category in the database? Example Database: Table name: Colors id category timestamp 1 yellow 14/2/2014 2 blue 13/2/2014 3 red 14/2/2014 4 yellow 13/2/2014 5 blue 11/2/2014 ...

phphtmlsqlselecttimestamp

Having trouble making alerts or confirmation dialogs function in JavaScript

EDIT: Many thanks to everyone who helped fix this issue (: Your help is greatly appreciated! I've been struggling to get the alert, confirm, or prompt functions to work properly in my code. Here's a snippet of the code that's causing troubl ...

javascriptjqueryhtml