Horizontal scroll with dynamic elements

css

Solution

Use `inline-block` instead of `float`, add this on the CSS:

.wrap-poltrona{
  white-space:nowrap;
  overflow:auto;
}
.poltrona{
  display:inline-block;
}

The demo http://jsfiddle.net/M5X3a/2/

Problem

I have squared elements that will appear on the screen extension in a row. These elements come dynamically then I have 2 as I have 50. Depending on the size of the screen and how many elements that i have i will have a overflow. When this happens I want to display a horizontal scroll. Follow here the fiddle that i tried The code: HTML ``` <div class="wrap-poltrona"> <div class="poltrona"></div> <div class="poltrona"></div> ... <div class="poltrona"></div> <div class="poltrona"></div> </div> ``` CSS ``` .wrap-poltrona{ } .poltrona{ width: 100px; height: 100px; background-color: red; float: left; margin: 5px; } ```

Original source