How to align 3 divs (left/center/right) inside another div?

Question

I want to have 3 divs aligned inside a container div, something like this:

[[LEFT]       [CENTER]        [RIGHT]]

Container div is 100% wid

Answer 1

This can be easily done using the CSS3 Flexbox, a feature which will be used in the future(When is completely dead) by almost every browser.

Check the Browser Compatibility Table

HTML

  

    Left
  
  

    Center
  
  

    Right
  

CSS

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

Output:

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

/* For Presentation, not needed */

.container > div {
  background: #5F85DB;
  padding: 5px;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}

  

    Left
  
  

    Center
  
  

    Right