Dynamic CSS Width Over 100%

Question

I have a parent container that contains a list of floating elements. The parent container does expand to the right when new floating elements are added.

But as I add more items and the items appear next to the right side of the window, the new item simply moves to a new row. Instead, I want it to continue expanding to the right, making my parent container more than 100%.

Is it possible to define the width of the container as something like max-width: infinite;?

To answer my own question, I know that I can make a maximum width of 5000% or something, but I was just wondering if there is a better solution. It seems strange to me that the page height max-width: is infinite; and page width may not have the same behavior.

Maybe this is just a stupid question, but I still ask it: P.

Answer 1

I think overflow:visible should do the trick.

Answer 2

As far as I know, you cannot reliably execute this cross browser without using Javascript to calculate the width of your floats.

You can then have a “wrapper” div around the above, which ensures that the fact that your floats can be 5000 pixels wide is hidden. Using overflow-x to scroll will give the appearance that your div is constantly growing.

I think this is due to the model of the box, as far as I know, there is no container that is getting bigger and bigger and bigger, without an estimated width. You will always remove the parent block element along the path up the DOM hierarchy (think body / html) with a fixed width.