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 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

You can achieve this by making the row container float and have the style "white-space: nowrap;"

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

EDIT An alternative is to make each item display inline and make each grid element float. http://jsfiddle.net/UeNZr/5/.