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

Styling your div elements in CSS to shrink in width relative to their parent container

.container { max-width: 750px; height: 100px; background-color: red; margin: 0; padding: 0; } .box1 { width: 100px; height: 100%; float: left; background-color: black; } .box2 { width: 650px; height: 100%; fl ...

htmlcss

I'm struggling to adjust the height of a div based on whether a list item within it contains a nested unordered

I have been working on a horizontal menu that is functioning well for me. However, according to the design requirements, I need to adjust the height of <div id="nav-subMenu"></div> if the main/parent menu li does not have any submenus or ul. Th ...

javascriptjquerycss

Adjusting the length of the To, CC, and BCC text fields in web design

I'm developing a webpage that will collect email addresses for user notifications. I want to ensure the length limits of the 'to,' 'cc,' and 'bcc' fields. According to RFC 2821/3696, an email address can be up to 256 cha ...

htmlwebhtml-email

"Utilizing a custom CSS style for a half heart rating system

I am currently working on implementing a rating system using the font-awesome fa-heart class. While I have successfully colored the full heart, I am facing difficulty in filling only the first half of the heart in red. Despite my research efforts, all solu ...

htmlcss

Adaptive Website displayed within an iframe

Currently, I have a responsive website that can be viewed here. The main objective is to embed this site into an iframe while maintaining its responsiveness. I attempted embedding my site in JSFiddle for testing purposes, which you can see here. However ...

javascripthtmlcsstwitter-bootstrapresponsive-design

Employing the html.validationmessagefor to display a client-side error notification

My text fields have server-side validation messages. The field 'title' is a required field on the server side with a '[Required]' data attribute in the class, but it only seems to be checked on a postback or form submit. I am saving the ...

javascriptjqueryhtmlasp.net-mvcclient-side-validation

Utilize CSS in your HTML using Express framework

I am attempting to link a css stylesheet to my basic html webpage. I am utilizing parse.com hosting for dynamic webpages that utilize express. There are numerous responses to this question, but none of them have proven successful in my case. I am trying ...

javascripthtmlcssnode.jsexpress

Customize the underline color of Material-UI's Input component

Trying to create an input component with a white underline. However, the underline color changes to black when hovering over it. It should remain white. Override the underline class as shown in the demo and instructions below. Despite trying to implement t ...

cssmaterial-uijss

Is there a quicker alternative to the 500ms delay caused by utilizing Display:none?

My div is packed with content, including a chart from amCharts and multiple sliders from noUiSlider. It also features various AngularJS functionalities. To hide the page quickly, I use $('#container').addClass('hidden'), where the rule ...

javascriptcssperformance

Efficient code for varying layouts of disabled Angular Material buttons

I've been wondering if there's a simpler way to customize the appearance of a disabled button using Angular Material. Currently, I achieve this by utilizing an ng-container and ng-template. While this method gets the job done, the code is not ve ...

cssangularif-statementangular-material

Using various designs on elements generated from ng-repeat

Is it possible to apply different styles to buttons created using ng-repeat by having b.color return a value from the btnValues object? Currently, it is not returning the value. If this is not possible, are there alternative methods to achieve this? < ...

htmlangularjsangularjs-ng-repeat

The word-wrap property does not function properly in the <small> element or any other HTML elements

My code has a small issue with the word-wrap property not working as expected. When I change it to a div element, it works fine but I need to use the small or another specified element. Does anyone have any ideas why the word is not breaking and what could ...

htmlcss

CSS vertical alignment: Getting it just right

I am currently using Bootstrap and below is a snippet of the code I have implemented. <div class="row"> <div class="col-lg-6"><img src="#" alt=""></div> <div class="col-lg-6"> <h2>Heading</h2> ...

htmlcsstwitter-bootstrap

Using CSS to disable an image map in conjunction with dynamically adjusting CSS styling

On the desktop version of the website, there is an imagemap implemented. However, when the site transitions into tablet or mobile view, the imagemap should be disabled to allow for a simpler navigation area to be displayed. I attempted to use the following ...

htmlcssdynamicimagemap

Setting a maximum character limit for an HTML textarea

I am currently attempting to limit the maximum number of characters allowed in a textarea. Using: <textarea rows="4" cols="50" maxlength="50"> It is functioning correctly in Firefox, but there is no impact in IE. This is an issue as many website u ...

htmltextareamaxlength

Attempting to transmit a pair of parameters from an HTML form through Flask (within a URL) in order to subsequently execute in a Python script

As a newcomer, I am working on a Python algorithm that requires two parameters obtained from an HTML form. Here is the snippet of my HTML code: <form action="result/"> <p><input class="w3-input w3-padding-16" method ...

pythonhtmlflaskget

Is there a way to change the CSS of a sibling element when hovering over it

Imagine a scenario where hovering over one row changes its color. However, what if we want all rows of the same color to highlight when any row is hovered over? Is it possible to achieve this using just CSS? .red-row:hover { background-color: red; } ...

htmlcss

What is the best way to make a bootstrap component (container) stretch to the full width and height of the window when it first loads, and which

I am looking to achieve something similar to the design on a certain website: The goal is to have a container with a background and a form inside that resizes proportionally based on the size of the window it is opened in. The resizing should be smooth an ...

javascriptjqueryhtmlcsstwitter-bootstrap

Calculate values dynamically when styling material-UI components

Utilizing the Material-UI style to define the class. Now, I aim to adjust the height based on the browser's width. Is there a way to dynamically calculate this within makeStyles() or implement a workaround? This snippet below represents what I am t ...

cssreactjsmaterial-ui

Ensure that the user remains within the current div when they click the submit button, even if the textbox is

For the past 48 hours, I've been grappling with an issue on my HTML page that features four divs. Each div contains three input fields and a button. The problem arises when a user leaves a text box empty upon submitting - instead of staying in the sam ...

javascriptjqueryhtmlcssajax