-1

I'm trying to link social media sites with the corresponding logo, no problem there. The problem occurs when I try to put the li 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/[email protected]/dist/ionicons.js"></script>

0

3 Answers 3

0

You can use the following CSS to float the items to the right side of your footer.

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

I changed your HTML and added a whole new CSS... Hopefully your don't mind :)

* {
    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/[email protected]/dist/ionicons.js"></script>
</body>

</html>

Have a great day!

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.