Make div expand only horizontally when more floating divs are added to it

Question

I am trying to make a div that contains other floating divs in order to adjust its width so that adding more floating divs (dynamically using jQuery) will only expand the div in its width, preventing the floating divs from creating a new line. Therefore, I want to fix this problem, so that each div with the grid-row class expands only in width, and therefore I can scroll using overflow: scroll for the parent grid div. I searched a lot for answers and it seems like this is a known issue. However, no answer solved my problem.

I am currently doing this:

  <div id="grid_container"> <div id="grid"> <div class="grid_row"> <div class="module" id="experience"> Experience </div> <div class="header"> Google </div> <div class="header"> Microsoft </div> </div> <div class="grid_row"> </div> </div> </div> 

CSS:

 body { } #grid_container { margin: 50px auto; width: 500px; height: 500px; padding: 10px; border: black solid 1px; } #grid { overflow:scroll; height: 100%; } .grid_row { clear: both; height: 50px; } .module, .header{ padding: 10px; float: left; border: gray solid 1px; } 

Answer 1

If you are creating a list, consider using a more semantic ul .

Demo

HTML:

  <ul class="grid"> <li> <ul> <li>One Mississippi</li> <li>Two Mississippi</li> <li>Three Mississippi</li> <li>Four Mississippi</li> <li>Five Mississippi</li> <li>Six Mississippi</li> </ul> </li> <li> <ul> ... </ul> </li> <li> <ul> ... </ul> </li> </ul> 

CSS

 .grid ul{ margin:10px 0; height:42px; width:100%; overflow-x:scroll; background:white; white-space:nowrap; } .grid li li { list-style-type:none; display:inline-block; padding:10px; border:1px solid gray; height:20px; } 

Answer 2

You can achieve this by making the string container container and getting the style "white-space: nowrap;"

http://jsfiddle.net/UeNZr/3/

EDIT An alternative is to have each element appear in a row and make each grid element float. http://jsfiddle.net/UeNZr/5/ .