How to float DIV side by side using CSS

In this article, we will discuss how to place 3 DIV side by side using CSS.

You need to have a container with a width greater than the sum of the widths of the all the 3 DIV elements. For this purpose, we have kept width of the container element as 520px and the individual DIVs as 170px. Use the float as left, the DIVs will be arranged side by side.

<div style="width: 520px;">
<div style="float: left; width: 170px;">Left DIV</div>
<div style="float: left; width: 170px;">Middle DIV</div>
<div style="float: left; width: 170px;">Right DIV</div>
<br style="clear: left;" /></div>
</div>

If the page is to be expanded in the future, the sizes need to be re-adjusted. So, it is advisable to use percentage (%) instead of px for the DIVs. This will also help in adjusting to screens of different sizes

<div style="width: 100%;">
<div style="float: left; width: 32%;">Left DIV</div>
<div style="float: left; width: 32%;">Middle DIV</div>
<div style="float: left; width: 32%;">Right DIV</div>
<br style="clear: left;" /></div>
</div>

 You can also do the same in a CSS file for modularity

#container{
    width: 100%;
    overflow: hidden; /* contain floated elements */
}
#left{
    float: left;
    width: 32%;
}
#center{
    float: left;
    width: 32%;
}
#right{
    float: left;
    width: 32%;
}