Question

In my project, I need to implement a container div that should have an unknown (unlimited) width, without breaking to a new line if its width overflows through the browser’s window.

The container div has the CSS property of (white-space: nowrap; display:inline;) and the components inside this div has (float:left) CSS property. All widths are set statically. To test the behaviour, i used a button that calls a javascript function that appends a component inside the container div.

The problem is that when the total width of the container div increased to more than the browser’s window width, the components inside the container div will break to a new line. I wonder whether it is possible to have a div with unlimited width?

Many Thanks..

Answer 1

The white-space: nowrap property does not apply to floated elements. Simply put, when you float an element to the left or right, there is no white space between them.

See white-space (CSS property) for more information on what white space is and the line that specifically states you can’t do this with floats.

Try setting them to display: inline-block so that the parent actually considers them to be content.