How to float 3 divs on same line using CSS?

The modern and quicker way is to use the CSS flexbox,

Three or more different div can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format.

  • float left; This property is used for those elements(div) that will float on left side.
  • float right; This property is used for those elements(div) that will float on right side.
.container {
  display: flex;
}
.container > div {
  flex: 1; /*grow*/
}
<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>
estion

or by using the CSS grid, see support tables.

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;   /* fraction*/
} Left div Middle div Right div