HTML A problem with floating the divs

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>
&l开发者_JAVA百科t;/div>

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

I'd try to use CSS in a way that doesn't have to do style= for each element. Without more context and/or testing I can't guarantee it will fix your problem, but its possible it will and its better form.

Either set float:left for all div tags

div {float:left;}

put all div tags to be floated left in the same class

<div class="className" style="width:960px; background-color:Red;">
a
</div>

div.className {float:left;}

Also, make sure you do not specify any kind of absolute position as this will override the float. There appear to be some subtleties concerning float and width, so check those out too http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
http://css.maxdesign.com.au/floatutorial/