Placing 3 div's Side by Side

Question

I want to place 3 divs side by side using CSS. I have gone through many posts on SO, but not getting the thing working for my project.

#quotescointainer{
    width: 100%;
    font-size: 12px;
}
#quotesleft{
    float:left; 
    width: 33%;
    background-color: white;
}
#quotescenter{ 
    background-color:white;
    width: 33%;
}
#quotesright{
    float:left;
    width: 33%;
}

The above does not place the div's in the correct place. I cannot seem to figure out the mistake I am making.

Answer 1

You could float: left all the inner divs:

http://jsfiddle.net/W8dyy/

You should fix the spelling of quotescointainer to quotescontainer.

#quotescointainer{
    width: 100%;
    font-size: 12px;
    overflow: hidden; /* contain floated elements */
    background: #ccc
}
#quotesleft {
    float: left; 
    width: 33%;
    background-color: #bbb;
}
#quotescenter { 
    float: left;
    background-color: #eee;
    width: 33%;
}
#quotesright{
    float: left;
    width: 33%;
    background-color: #bbb;
}

Answer 2

I recently asked this exact same question.

Here is a link:

Inline div elements

Here is my accepted answer:

Set the CSS display style to display:inline-block;.

This allows the element to keep it's block-like functionality, while also allowing it to be displayed inline. It's a half-way house between the two.

(But note that there are some compatibility issues with older versions of IE)

Answer 3

With the advent of CSS grids, this can be better achieved it rather than using display: inline and float.

https://jsfiddle.net/dxec62vk/

Also there is good browser support for grid now: https://caniuse.com/#feat=css-grid