Scrolling Items In Div Horizontally Instead Of Vertically?

Does anyone know of an effective way to float elements so that they scroll horizontally in a container as oppose to vertically? For example, let's say I have this layout:

Solution 1:

you may just give white-space: nowrap to the container and display: inline-block; and white-space: normal to every .item element

Doing so you won't need to previously know the total width of all elements, or calculate it via javascript/jQuery. Then you should just adjust the gap between inline-blocks elements (there're several methods to achieve this: see http://css-tricks.com/fighting-the-space-between-inline-block-elements/

for the height — given a strict doctype — you may also set height: 100%; to html, body, #container and .item and width:100% to .item elements so they will always fit the whole viewport

Solution 2:

You can also use jQuery to measure the width of inner elements, count them and assing corresponding width to the parent container (like n * m, where n - number of child elements, m - their width).

Share