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

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>
Notes:
Establish flex container.
Prevent flex items from expanding full height (a default setting). The flex-start value will align each item at the start of the cross axis of the container. In this case, that's the top of the vertical (Y) axis. If you want the items vertically centered, use the center value instead. The default value is stretch.
Align flex items horizontally in the container. You can also try justify-content: space-around. Note that this method will only center the middle item in the container if the left and right elements (the back/forward links) are equal width. If the links vary in length, you'll need to use another method (see boxes #71-78 here).
layout 2: [left] [center]
#header-wrap::after { /* 4 */
content: "";
width: 100px;
}
#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>
</section>
Notes:
Use an invisible pseudo-element to create equal balance on the opposite end of the container. This is essentially a replacement for the DOM element that was removed from the first example. It keeps the middle item centered.
jsFiddle
Browser Support
Flexbox is supported by all major browsers, except IE 8 & 9.
Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes.
For a quick way to add all the prefixes you need, use Autoprefixer.
More details in this answer.

Answer 2

From your structure you could use flex(IE11) and justify-content, then hide .clearfix and remove it when on fourth position:
with 3 (4 including clearfix)
#header-wrap {
display: flex;
justify-content: space-between;
}
#header-wrap > div {
border: solid;
width: 100px;
margin:0 0 auto;/* remove if you want each boxes same height */
}
.clearfix:nth-child(4) {
display: none;
}
.clearfix {
opacity: 0;
}
<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>
when only 2 (3) same CSS involved
#header-wrap {
display: flex;
justify-content: space-between;
}
#header-wrap > div {
border: solid;
width: 100px;
margin:0 0 auto;/* remove if you want each boxes same height */
}
.clearfix:nth-child(4) {
display: none;
}
.clearfix {
opacity: 0;
}
<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="clearfix"></div>
</div>
</section>
for older browsers.
with your structure you could use text-align, :after and the selector +:
with 3 (4)
#header-wrap {
text-align: justify;
}
#header-wrap:after {
content: '';
display: inline-block;
width: 99%;
}
#header-wrap > div {
display: inline-block;
vertical-align: top;
border: solid;
width: 100px;
}
#header-wrap > div + div + div +.clearfix {
display: none;
}
.clearfix {
opacity: 0;
}
<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>
and 2(3) same CSS involved:
#header-wrap {
text-align: justify;
}
#header-wrap:after {
content: '';
display: inline-block;
width: 99%;
}
#header-wrap > div {
display: inline-block;
vertical-align: top;
border: solid;
width: 100px;
}
#header-wrap > div + div + div +.clearfix {
display: none;
}
.clearfix {
opacity: 0;
}
<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="clearfix"></div>
</div>
</section>

Answer 3

Consider positioning the left and right elements differently.
https://jsfiddle.net/5gxLvp8a/4/
#header-wrap {
text-align: center;
border: 1px solid green;
margin: 0 auto;
padding: 1rem 2.5rem;
position: relative;
div {
display: inline-block;
vertical-align: middle;
}
}
.header-left {
float: left;
border: 1px solid red;
width: 100px;
position: absolute;
left: 25px;
}
.header-right {
float: right;
border: 1px solid red;
width: 100px;
position: absolute;
right: 25px;
}
See code snippet below:
html, html a {
font-size: 10px; }
#header-blue {
width: 100%;
margin-bottom: 50px;
height: auto;
background-color: #3498DB;
color: #fff; }
#header-blue #header-wrap {
text-align: center;
border: 1px solid green;
margin: 0 auto;
padding: 1rem 2.5rem;
position: relative; }
#header-blue #header-wrap div {
display: inline-block;
vertical-align: middle; }
#header-blue .header-left {
float: left;
border: 1px solid red;
width: 100px;
position: absolute;
left: 25px; }
#header-blue .header-right {
float: right;
border: 1px solid red;
width: 100px;
position: absolute;
right: 25px; }
#header-blue .header-center {
border: 1px solid red;
margin: 0 auto !important;
display: inline-block;
width: 100px; }
.clearfix:after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both; }
<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>
<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="clearfix"></div>
</div>
</section>

Answer 4

Widely supported - my immediate answer is to use display: table;
Let me 'fiddle' around with this for a moment and get back to you - I was just working on something similar yesterday.
EDIT 1:
At first glance, I would advise utilizing classes versus ID's. This deals with a much broader topic (CSS Specificity) but is extremely useful to think about early in your career. That being said, I am working on a solution for you, as I THINK I know what you want.
As the commenter mentioned - it would help ALOT to see what you want to see as an end result. From my interpretation of your screenshots (poor quality & non-descriptive FYI), I feel like you want this header to maintain the left/back button and the logo on mobile devices. However, on a desktop/laptop viewport size, you want a forward button to show itself.
If this is incorrect, please verify!
EDIT 2:
Going off the above poster's JSFiddle, I've come up with a "better" solution that stacks the elements within the header as opposed to going outside of the 'container' that it exists in: https://jsfiddle.net/f815aa6y/1/
Still working on the right solution to get this to vertically align in the middle :)