-1

I am just looking for a quick answer on how to line up three small images (42px by 42px) horizontally. Currently, they are lined up vertically, and I wish to have them horizontally in a line. Here is my jsfiddle - https://jsfiddle.net/9x7qnLyu/. Feel free to add your own images (as I am using locally saved images) - I am just looking for the basic structure of the code.
Here is my html: 

<!DOCTYPE html>
<html lang ="en">
<body>
<style>
.bottombar {
  position:fixed;
  left:0;
  bottom:0;
  width:100%;
  background-color:#575a5a;
  color:white;
  text-align:left;
  border-top:1px solid black;
  border-bottom:2px solid black;
  border-left:2px solid black;
  border-right:2px solid black;
}
</style>
<div class="bottombar">
            <div class="bartext" style="float:left">
                <p href="ContactUs.html">Contact Us</p>
                <p>Site Map</p>
                <p>©2020</p>
            </div>

            <div class="socialicons" style="float:right">

                    <div class="icon">
                        <a href="https://facebook.com" target="_blank"><img title="Facebook" src="Images/FacebookLogo.png" alt="Facebook Logo" style="width:42px;height:42px;"></a>
                    </div>

                    <div class="icon">
                        <a href="https://instagram.com" target="_blank"><img title="Instagram" src="Images/InstagramLogo.png" alt="Instagram Logo" style="width:42px;height:42px;"></a>
                    </div>

                    <div class="icon">
                        <a href="https://youtube.com" target="_blank"><img title="Youtube" src="Images/YoutubeLogo.png" alt="Youtube Logo" style="width:42px;height:42px;"></a>
                    </div>

            </div>
</div>
</body>
</html>

Thanks in advance.

Trisan H.
  • 3
  • 3

2 Answers2

1

You can float your elements left to make them appear in-line with this class:

.icon{
    float: left;
}


<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    
    <style>
    .bottombar {
      position:fixed;
      left:0;
      bottom:0;
      width:100%;
      background-color:#575a5a;
      color:white;
      text-align:left;
      border-top:1px solid black;
      border-bottom:2px solid black;
      border-left:2px solid black;
      border-right:2px solid black;
    }
    .icon{
        float: left;
    }
    </style>
    <script>
        
    </script>
</head>
<body>
<div class="bottombar">
    <div class="bartext" style="float:left">
        <p href="ContactUs.html">Contact Us</p>
        <p>Site Map</p>
        <p>©2020</p>
    </div>

    <div class="socialicons" style="float:right">

            <div class="icon">
                <a href="https://facebook.com" target="_blank"><img title="Facebook" src="Images/FacebookLogo.png" alt="Facebook Logo" style="width:42px;height:42px;"></a>
            </div>

            <div class="icon">
                <a href="https://instagram.com" target="_blank"><img title="Instagram" src="Images/InstagramLogo.png" alt="Instagram Logo" style="width:42px;height:42px;"></a>
            </div>

            <div class="icon">
                <a href="https://youtube.com" target="_blank"><img title="Youtube" src="Images/YoutubeLogo.png" alt="Youtube Logo" style="width:42px;height:42px;"></a>
            </div>

    </div>
</div>
</body>
</html>
0

You can use

<!DOCTYPE html>
<html lang ="en">
<body>
<style>
.bottombar {
  position:fixed;
  left:0;
  bottom:0;
  width:100%;
  background-color:#575a5a;
  color:white;
  text-align:left;
  border-top:1px solid black;
  border-bottom:2px solid black;
  border-left:2px solid black;
  border-right:2px solid black;
}
.icon{
  float:left;#or right depending on your arrangement
  width:30%;#give your width here
}
</style>
<div class="bottombar">
            <div class="bartext" style="float:left">
                <p href="ContactUs.html">Contact Us</p>
                <p>Site Map</p>
                <p>©2020</p>
            </div>

            <div class="socialicons" style="float:right">

                    <div class="icon">
                        <a href="https://facebook.com" target="_blank"><img title="Facebook" src="Images/FacebookLogo.png" alt="Facebook Logo" style="width:42px;height:42px;"></a>
                    </div>

                    <div class="icon">
                        <a href="https://instagram.com" target="_blank"><img title="Instagram" src="Images/InstagramLogo.png" alt="Instagram Logo" style="width:42px;height:42px;"></a>
                    </div>

                    <div class="icon">
                        <a href="https://youtube.com" target="_blank"><img title="Youtube" src="Images/YoutubeLogo.png" alt="Youtube Logo" style="width:42px;height:42px;"></a>
                    </div>

            </div>
</div>
</body>
</html>

You can also use bootstrap columns if you want to add better columns

Tawanda Madzidzise
  • 26
  • 2