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 cod

Answer 1

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;
}

  

    
1
    
2
2
2
2
    
3
3
    

  

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;
}

  

    
1
    
2
2
2
2
    

  

---

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;
}

 

  

    
1
    
2
2
2
2
    
3
3
    

  

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;
}

  

    
1
    
2
2
2
2