Question

I am trying to make a div that contains other floating divs to adjust its width such that adding more floating divs (dynamically using jQuery) will only expand the div in its width, not allowing the floating divs to create a new line. Therefore, I want to fix this issue such that each div with class grid-row only expands in width, and so I will be able to scroll using the overflow: scroll for the parent grid div. I have searched a lot for answers, and it seems that it is a famous issue. However, non of the 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’re making a list, consider using the 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;
}