Search code examples
cssasp.net-mvc-3htmlposition

Wrap Div to new line when there is no more space

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

Solution

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

    UPDATE If IE7 is still a concern:

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