The Best Way To Place 2, 3, or 4 Div Side By Side

One day i was making a simple page for my website project and found a little problem (That time i was new born child to eat the food ). I was trying to manage three DIVs side by side. But as i was new in this field so unable to do this task. Then i found a easy way that completed this task.With this way you can simply  place 2, 3, or 4 div side by side using css.

Look how simple it is -

* Style.css -

<style>
#Main_Container
{ width:515px; padding:0px; }
#left_Column
{ float:left; width:130px; height:auto; margin-right: 7px; border:#ccc 1px solid; word-wrap:break-word; }
#center_Column
{ float:left; width:120px; height:auto; margin-right: 5px; border:#ccc 1px solid; word-wrap:break-word; }
#right_Column
{ float:left; width:120px; height:auto; border:#ccc 1px solid; word-wrap:break-word; }
</style>

* And here is HTML -

<div id=”Molumn_Container”>

<div id=”left_Column”>
This is left container
</div>

<div id=”center_Column”>
This is center container 1
</div>

<div id=”center_Column”>
This is center container 2
</div>

<div id=”right_Column”>
This is right container
</div>

<div style=”clear:both”> </div>
</div>

These container have auto height, it will adjust its hide according to its contents. Maybe this is help full for beginners. Cheers