Question

I have a problem as I mentioned above.

In my web app, I’ll be generating many divs dynamically by jQuery(ASP.NET MVC).
Each new div can have a different width, and all of them MUST be floated to the left

I tried (test) to float to the left 2 divs, but with no success. What am I doing wrong ?

Each div has a defined width, because when the total width of all divs > mainDIV's width, then the scrollbar will appear. Now, in that case, this 2 divs are not floated to the left

Here’s the code

<div id="mainDIV" style="overflow:auto; width:100%;">
   <div style="width:960px; float:left; background-color:Lime;">
      a
   </div>
   <div style="width:960px; float:left; background-color:Red;">
      b
   </div>
</div>

Answer 1

You have to make sure that the containing div is wide enough to accommodate the floated div’s side by side.

So in your example, you would have to set the width of the containing div mainDIV to at least 1920px.

You need an additional wrapper if you want the scroll-bars to appear on mainDIV:

html:

<div id="mainDIV" style="overflow:auto; width:100%;">
   <div id="wrapper">
     <div style="width:960px; float:left; background-color:Lime;">
       a
     </div>
     <div style="width:960px; float:left; background-color:Red;">
       b
     </div>
   </div>
</div>

css:

#wrapper {
    width: 1920px;
}