div placement issue

I have a container div, which will contain 3 or more divs

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div> 

Now, I want to place div's as

[conta开发者_开发问答iner-div]
   [1st div]      [2nd div]      [3rd div]
   [4th div]      [5th div] 
[/container-div]

How to achieve following?

Thanks

If you always want 3 divs in a row you can add a class to them and style them like this:

.float {
    float: left;
    width: 33%;
}

If you want to have margins you should notate them also in % and substract the margin from the width.

<style type="text/css">
#one,#two,#three,#four,#five{
float:left;
}

.clearfix{
clear:both;
}

</style>

<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div class="clearfix"></div>
  <div id="four"></div>
  <div id="five"></div>
</div>

just try it

Three ways that I can think of.

First, you can use float to set their position (style='float:left/right'). However, this will cause them to overflow the containing div, unless you follow them with another div with clear:both (<div style='clear:both'></div>), as shown by Anish.

Second, you can use a table or the display property table, table-row, and table-cell. e.g:

<div style='display:table'>
  <div style='display:table-row'>
    <div style='display:table-cell'>div 1</div>
    <div style='display:table-cell'>div 2</div>
    <div style='display:table-cell'>div 3</div>
  </div>
</div>

And finally, you can use the display property inline-block, which removes the linebreak at the end of the div while allowing you to keep the fixed width. e.g:

<div style='display:inline-block;width:33%'>div 1</div>
<div style='display:inline-block;width:33%'>div 2</div>
<div style='display:inline-block;width:33%'>div 3</div>
<br />
<div style='display:inline-block;width:33%'>div 4</div>
<div style='display:inline-block;width:33%'>div 5</div>