CODEWITHSUNDEEP
htmlcss
Hozefa
Hozefa

Reputation: 1726

Placing 3 div's Side by Side

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.

Upvotes: 10

Views: 39925

Answers (3)

Hozefa
Hozefa

Reputation: 1726

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

Upvotes: 1

thirtydot
thirtydot

Reputation: 228152

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

Upvotes: 20

Freesnöw
Freesnöw

Reputation: 32133

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)

Upvotes: 1

Related Questions