How To Place Two Divs Next To Each Other Using CSS

For More Videos Visit Our YouTube Channel

Place Two Divs Next To Each Other Using CSS - Example

Here we consider how to Place Two Divs Next To Each Other Using CSS. Lets start with one example here. Suppose we have two Divs as shown below.



Here is the style given for these divs.

#firstDiv {
     width: 200px;
     height:200px;
     background-color: yellow;
}
#secondDiv {
     width: 200px;
     height:200px;
     background-color: red;
}



On RunTime, these two divs looks like as shown below.



Lets consider how to place these divs next to each other.


Place Two Divs Next To Each Other - Solution

For placing these two divs next to each other, just give style float : left.
Provide float : left for both Divs.


#firstDiv {
     width: 200px;
     height:200px;
     background-color: yellow;
     float : left;
}


#secondDiv {
     width: 200px;
     height:200px;
     background-color: red;
     float : left;
}



Here is the end result of new style.



By providing float : left for both Div, we can Place Two Divs Next To Each Other.