html - Aligning three elements (left/center/right) inside a container

Question

I am attempting to create a full-width banner with three internal inline elements. A back link, a logo and a forward link.

I would also like to use the same code to create a full-width banner with TWO internal inline elements. A left back link and a central logo.

What I have so far, is:

HTML

 <section id="header-blue">
  <div id="header-wrap">
    <div class="header-left"><p>1</p></div>
    <div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
    <div class="header-right"><p>3</p><p>3</p></div>
    <div class="clearfix"></div>
  </div>
</section>

SCSS:

#header-blue {
  width: 100%;
  margin-bottom: 50px;
  height: auto;
  background-color: $primary-blue;
  color: #fff;

  #header-wrap {
    text-align: center;
    border: 1px solid green;
    margin: 0 auto;
    padding: 1rem 2.5rem;
    div {
      display: inline-block;
      vertical-align: middle;
    }
  }

  .header-left {
    float: left;
    border: 1px solid red;
    width: 100px;
  }
  .header-right {
    float: right;
    border: 1px solid red;
    width: 100px;
  }
  .header-center {
    border: 1px solid red;
    margin: 0 auto !important;
    display: inline-block;
    width: 100px;
  }

} // header-blue

I am looking for a solution that is widely supported, so I'm not sure if that rules flex out?

The result is this: FIDDLE

EDIT: THE FINAL CORRECT DESIGN WHEN COMPLETE

Disclaimer: Please understand that although this may be viewed as a 'duplicate' post, after a fair few hours of online research and trial and error, I am still no further progressed. I would, therefore, like to seek help unique to this problem and learn in the process.

Answer 1

You can build the layout with CSS flexbox.

For clarity and conciseness, I removed several non-essential decorative styles from the original code. I also used compiled CSS for the benefit of those who don't use preprocessors.

layout 1: [left] [center] [right]

#header-wrap {
  display: flex;                   /* 1 */
  align-items: flex-start;         /* 2 */
  justify-content: space-between;  /* 3 */
  text-align: center;
  padding: 1rem 0;
}

#header-blue   { margin-bottom: 50px; background-color: #3498DB; color: #fff; }
.header-left   { border: 1px solid red; width: 100px; }
.header-right  { border: 1px solid red; width: 100px; }
.header-center { border: 1px solid red; width: 100px; }

<section id="header-blue">
  <div id="header-wrap">
    <div class="header-left">
      <p>1</p>
    </div>
    <div class="header-center">
      <p>2</p>
      <p>2</p>
      <p>2</p>
      <p>2</p>
    </div>
    <div class="header-right">
      <p>3</p>
      <p>3</p>
    </div>
  </div>
</section>