How can I get the divs inside a div to continue on a new row when the current row (screen horizontally) is full?

I have following html in a asp.net MVC project.

In my layout page:

<div style="display:inline-block; vertical-align: top; width:225px; margin-left:10px;">
        <div id="datepicker"></div>
 
        <div id="typ" style="margin-right:10px;">
            @Html.Action("_GetSomeContent", "Controller")
        </div>
    </div>
 
    <div id="body">
 
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
 
    </div>    

Inside the RenderBody i have a page containing a loop that outputs a number of divs with a bit of content:

<div style="float:left;width:186px;">
...
....
...
</div>
 
<div style="float:left;width:186px;">
...
....
...
</div>

css I think is contributing to the problem:

html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;   
    white-space:nowrap;
 
}

For some reason when the page is full horizontally the div is continuing on the same line so that scrolling horizontally is needed, not placed below as I what them to.

I'm guessing it's because of the white-space:nowrap; in html. But when I remove white-space:nowrap the whole <div id="body"> is put on below the first div in the layout page and I want this two divs to always be side by side.

How can I get the divs inside