Wrap Div to new line when there is no more space

Question

I am working on a web application (asp.net mvc3)

I have a Main div. I want to add lots of div inside that main div.

But I want them to be like this: Divs should appear next to each others on a line, and when there is no more space left, the next div will wrap to a new line. (Similar to writing a text, when there is no more space on this line the next word will wrap to a new line)

I tried to use display: inline; to make the appear next to each others, but how can I make them wrap when they reach the end of the Main div?

Is there a way to do it without hard coding the positions? because divs are added dynamically so i don't know how big will they be or their number

Thanks

Answer 1

Try display: inline-block - http://jsfiddle.net/7FJRr/1/

UPDATE If IE7 is still a concern:

div {
    display: inline-block;
    zoom: 1; 
    *display: inline;
}

Answer 2

It's possible to do it with the help of flex.

display: flex;
flex-wrap: wrap;

For example:

.flex{
  width: 5rem;
  background: yellow;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex > div{
  width: 2rem;
  background: black;
  color: white;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>