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

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

  

    

      
1
    
    

      
2
      
2
      
2
      
2
    
    

      
3
      
3
    
  

Notes:

1. Establish flex container.
2. 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.
3. 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; }

  

    

      
1
    
    

      
2
      
2
      
2
      
2
    
  

Notes:

4. 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.