CODEWITHSUNDEEP
javascripthtmlcss
topherg
topherg

Reputation: 4293

Stop Floating HTML elements from dropping to the next line

I am building a site that is designed for a number of dynamic number of div elements (each with their own widths) to be displayed, but instead of going down the page, they go along horizontally. However, when the number of items combined width is larger than the container div, it automatically drops down to the next line. Is there anyway to stop that from happening, and allow for horizontal scrolling (by a script rather than an overflow bar)?

Upvotes: 4

Views: 8281

Answers (1)

Chris Sobolewski
Chris Sobolewski

Reputation: 12935

Rather than floating them, set them to display:inline-block;. Set the containing element to overflow:hidden;, and then you can use your script to scroll them through any number of means, such as adjusting the margin on the first element, or wrapping them in another element and changing the left attribute (you'll need to set the position if you go this route).

Edit: You'll also need to set white-space:nowrap

See this working fiddle: http://jsfiddle.net/D8bea/

Upvotes: 14

Related Questions