CODEWITHSUNDEEP
css
Abou
Abou

Reputation: 65

Unlimited Div width? Is it possible?

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..

Upvotes: 2

Views: 3100

Answers (2)

animuson
animuson

Reputation: 54729

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.

Upvotes: 4

Timothy S. Van Haren
Timothy S. Van Haren

Reputation: 8966

Try adding a specific height to the container div, or removing the float: left rule from the components inside the div.

Upvotes: 0

Related Questions