How To Place Two Divs Next To Each Other Using CSS




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.

How To Place Two Divs Next To Each Other Using CSS, Place Two Divs Next To Each Other Using CSS, Place Two or More Divs Next To Each Other Using CSS, Place Two Divs Next To Each Other, Place Two or More Divs Next To Each Other, Place Two Divs Using CSS, Div, CSS, HTML

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.

How To Place Two Divs Next To Each Other Using CSS, Place Two Divs Next To Each Other Using CSS, Place Two or More Divs Next To Each Other Using CSS, Place Two Divs Next To Each Other, Place Two or More Divs Next To Each Other, Place Two Divs Using CSS, Div, CSS, HTML

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




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.

How To Place Two Divs Next To Each Other Using CSS, Place Two Divs Next To Each Other Using CSS, Place Two or More Divs Next To Each Other Using CSS, Place Two Divs Next To Each Other, Place Two or More Divs Next To Each Other, Place Two Divs Using CSS, Div, CSS, HTML

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