css inline-block div positioning

Emil Ruberte

New Member
I'm trying to fix a positing issue in a responsive design.I have a container div, containing 4 (but it could be more or less) divs that are displayed as inline-block. I would like to know how to control the number of divs per line when the page is resized (with CSS, if it's possible). For example, when 4 containees no longer fits in the container, the last one is moved to second line. I would like in that case to have 2 containees in the first line and 2 containees in the second line. I dont know how to do that. Your help would be welcomed!EDIT:it could also be 6 containees, in the case the layout would be:- 1 line of 6 blocks if it fits- 2 lines of 3 blocks- 3 lines of 2 blocks- 6 lines of onethe number of containees is variable. I just want to have the same number of containees per linethe html:\[code\]<div class="container"> <div class="containee"></div> <div class="containee"></div> <div class="containee"></div> <div class="containee"></div></div>\[/code\]the css:\[code\].containee { width:200px; height:200px; display:inline-block; background-color:tomato}\[/code\]the example can be seen here : http://cssdesk.com/uGLbq(PS : I tried to find the solution searching the web but I dont really know the good keywords related with this topic)
 
Back
Top