Basically, I have a main container div with nested content. This div is has a dynamic width and will resize with the page.
Now, in this div, I have a list of items. All the items are fixed widths and I want to be able to extend the container div (overflow: auto). If I set my list as a display: block;, it will become 100% width of the container. However, if there are many list items that force a horizontal scrollbar, the block list stops at the container scrollbar and the list items continue passed it.
Here is an example: http://jsfiddle.net/9tjZz/4/
How can I get the block list to extend passed the scrollbar of the container list the items do?
You can use a clearfix to fix this... just add the clearfix class to your container and add the appropriate CSS. Here is the working example:
http://jsfiddle.net/9tjZz/5/
This is the CSS you need:
And then add
class="clearfix"
where needed. In your case, it is the container.