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

There are several tricks available for aligning the elements.

01. Using Table Trick

.container{
  display:table;
 }

.left{
  background:green;
  display:table-cell;
  width:33.33vw;
}

.center{
  background:gold;
  display:table-cell;
  width:33.33vw;
}

.right{
  background:gray;
  display:table-cell;
  width:33.33vw;
}

  

    Left
  
  

    Center
  
  

    Right
  

02. Using Flex Trick

.container{
  display:flex;
  justify-content: center;
  align-items: center;
   }

.left{
  background:green;
  width:33.33vw;
}

.center{
  background:gold;
   width:33.33vw;
}

.right{
  background:gray;
   width:33.33vw;
}

  

    Left
  
  

    Center
  
  

    Right
  

03. Using Float Trick

.left{
  background:green;
  width:100px;
  float:left;
}

.center{
   background:gold;
   width:100px;
   float:left;
}

.right{
   background:gray;
   width:100px;
   float:left;
}

  

    Left
  
  

    Center
  
  

    Right