Centered Footer Elements

by lasha

HTML

<footer>
  <div class="section1">Left Side</div>
  <div class="section2">Middle Section</div>
  <div class="section3">Right Side</div>
</footer>

CSS

footer {
  position: relative;
  padding: 10px;
  background: #ccc;
  text-align: center;
}
footer:after {
  content: "";
  clear: both;
  display: block;
}
.section1, .section2, .section3 {
  display: inline-block;
  border: 1px solid;
  text-align: left;
}
.section1 {
  /* float: left; */
  /* width: calc(33.3% - 6px); */
  width: 150px;
}
.section2 {
  /* float: left; */
  /* width: calc(33.3% - 6px); */
  width: 300px;
}
.section3 {
  /* float: right; */
  /* width: calc(33.3% - 6px); */
  width: 150px;
}