How To Bring Two Div In Same Line

I am confused how to bring two div into same line. I used float:left and float:right one for each of them and also they are contained as two different div id of a div class. Also u

Solution 1:

try float: left for both of them

Solution 2:

You can chance the display property to either inline or inline-block.

For example:

<divclass="example">One</div><divclass="example">Two</div>

With

.example {
    display: inline;
}

Solution 3:

There are several methods to achieve this, and I've detailed seven of them on a sample page. Tl;dr:

• floating the divs (@vladkras' answer)
• Using display: inline-block; (@Sohnee's answer)
• Using Flexbox: display: flex on the parent
• Playing with negative margin to move the second div around
• Using display: table on the parent and display: table-cell on the children
• Playing around with position: absolute
• And, the newest and in many cases best solution, CSS Grid Layout: display: grid on the parent.