How can I display items on the extreme left and right of the page?-CodePudding

I'm working on making an e-commerce website. For the footer, I want to place the e-commerce's brand name on the top left, and the social media icon links on the top right.

The layout I want as follows:

However, the footer currently looks like this:

Here is what I have coded.

.footer-top {
  display: inline-block;
  width: 100%;
}

.title {
  float: left;
}

.social {
  float: right;
}

<div class="footer-top">
  <div class="name">
    <h1><span class="bigger">XXXX</span></h1>
  </div>
  <div class="social">
    <!--Social media icons-->
    <a href="#" class="fa fa-facebook"></a>
    <a href="#" class="fa fa-instagram"></a>
  </div>
</div>

What is my error?

CodePudding user response：

You can use display:flex; to style navbar. Copy these code and paste in your CSS instead of code you have provided.

.footer-top {
   display:flex;
  justify-content:space-between;
  align-items:center;
}

<div class="footer-top">
  <div class="name">
    <h1><span class="bigger">XXXX</span></h1>
  </div>
  <div class="social">
    <!--Social media icons-->
    <a href="#" class="fa fa-facebook">fb</a>
    <a href="#" class="fa fa-instagram">insta</a>
  </div>
</div>

CodePudding user response：

The reason why your layout wasn't what you expected is because you had .name in html but .title in css. Correct the class name and floats will work as well. Also there is no need to have display: inline-block and width: 100%. <div> is a block by default and occupies 100% of width.

That being said, with flex it is easier to align content vertically.

.title {
    float: left;
}

.social {
    float: right;
}

<div class="footer-top">
    <div class="title">
        <h1><span class="bigger">XXXX</span></h1>
    </div>
    <div class="social">
         <!--Social media icons-->
        <a href="#" class="fa fa-facebook">icon</a>
        <a href="#" class="fa fa-instagram">icon</a>
    </div>
</div>