How to setup a footer with floating paragraphs using html+css

I'm trying to write a footer using CSS, I need a message on the left bottom of the page and a page number on the right bottom. This is my current code. The two paragraphs don't show up correctly:

<html>
<head>
<style>
  .footer {
    bottom: 0px;
    position: fixed;
    display: inline-block;
  }
  .left {
    float: left;
  }
  .right{
    float: right;
  }
</style>
</head>
<body>
  <div class="footer">
    <p class="left">this is a footer</p>
    <p class="right">Page: 1/12</p>
  </div>
</body>
</html>

thanks in advance!

Solution

Remove the back slashes from your code and it works fine. I also added a width to your footer width: 100%;

<html>
<head>
<style>
.footer {
    bottom: 0px;
    position: fixed;
    display: inline-block;
    width: 100%;
}
.left {
    float: left;
}
.right{
    float: right;
}
</style>
</head>
<body>
    <div class="footer">
        <p class="left">this is a footer</p>
        <p class="right">Pag: 1/12</p>
    </div>
</body>
</html>