CODEWITHSUNDEEP
htmlwordpresscss
user9583164
user9583164

Reputation:

Adding a footer with text on left and right side in wordpress

I have added the following code to my footer.php file in my wordpress website (using twentyfourteen theme). The Privacy policy and terms and conditions, with their respective links, are shown on the left side, but my text about copyright is not shown on the right side (it is not shown anywhere). Anyone knows what I missed?

<div class="MainDiv">
  <div class="MainBottom footer">
    <div class="MainFooter container">
      <div class="LeftSide ">
        <a target="_blank" href="https://www.myurl.html">Privacy Policy</a>
        <a target="_blank" href="https://www.myurl.html">Terms and Conditions</a>

        <div class="RightSide">
          Copyright © 2018 My Company. <span>All rights reserved.</span>
        </div>
        <div class="BottomFix"></div>
      </div>
    </div>

Upvotes: 0

Views: 1185

Answers (3)

Asamoah
Asamoah

Reputation: 489

I don't know what styles you've written for those classes, but here is a slightly modified version of your initial code with a simple flexbox-style fix:

.MainFooter {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
<div class="MainDiv">
  <div class="MainBottom footer">
    <div class="MainFooter container">
      <div class="LeftSide ">
        <a target="blank" href="https://www.myurl.html">Privacy Policy</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a target="blank" href="https://www.myurl.html">Terms and Conditions</a>
      </div>
      <div class="RightSide">
        Copyright © 2018 My Company. <span>All rights reserved.</span>
      </div>
    </div>
    <div class="BottomFix"></div>
  </div>
</div>

Upvotes: 0

Johannes
Johannes

Reputation: 67768

You can use display: flex and justify-content: space-betweenfor the .MainFooter container, and to fix that at the bottom of the window, you can use position: fixed for MainBottom (plus some other settings - see below).

BTW: You forgot to close the .LeftSide DIV, i also added that in my snippet.

.MainBottom {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.MainFooter {
  display: flex;
  justify-content: space-between;
}
<div class="MainDiv">
  <div class="MainBottom footer">
    <div class="MainFooter container">
      <div class="LeftSide ">
        <a target="blank" href="https://www.myurl.html">Privacy Policy</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a target="blank" href="https://www.myurl.html">Terms and Conditions</a>
      </div>
      <div class="RightSide">Copyright © 2018 My Company. <span>All rights reserved.</span></div>
    </div>
  </div>

Upvotes: 1

szczepaniakdominik
szczepaniakdominik

Reputation: 472

Basically div has alignment to the left side. It displays as you can see in the picture below

enter image description here

Upvotes: 0

Related Questions