'placing fixed images side by side

I want to have fixed social media icons in the top right corner of my page. I've got working css code that accomplishes this, but I'm wondering if there is a more efficient way since it seems repetitive. I'd also like to hear any compatibility issues you notice.

    img.body {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    img.tile1 {
      position: fixed; 
      top: 0px; 
      right: 0px; 
      width: 48px;
      height: 48px;
    }
    img.tile2 {
      position: fixed; 
      top: 0px; 
      right: 48px; 
      width: 48px;
      height: 48px;
    }
  <a href="instagram.com/handle"><img src="graphics/ig.png" class="tile1"></a>
  <a href="facebook.com/handle"><img src="graphics/fb.png" class="tile2"></a>
cssimagefixed


Solution 1:[1]

You'd be better off wrapping a container around both of the icons, then applying position: fixed; to that container. This will be much easier to control rather than having to use position:fixed; on both of the icons individually.

Use top:0; and right: 0; on the container, this will position the container in the top right corner.

body {
  background-color: teal;
  height: 200vh;
}

a img {
  max-width: 50px;
  max-height: 50px;
}

.icon-container {
  position: fixed;
  width: fit-content;
  top: 0;
  right: 0;
}

h1 {
  text-align: center;
}
<body>
  <div class="icon-container">
    <a href="instagram.com/handle"><img src="http://cdn.onlinewebfonts.com/svg/img_391102.png" class="tile1"></a>
    <a href="facebook.com/handle"><img src="http://cdn.onlinewebfonts.com/svg/img_391102.png" class="tile2"> </a>
  </div>
  <h1>Element</h1>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sigurd Mazanti

Related Questions