Coder Perfect

Wrapping of a span or div should be avoided.

Problem

I’d like to insert a container full of fixed-width div elements and have the horizontal scroll bar display. The div/span elements should be arranged in a line from left to right in the HTML order (essentially unwrapped).

As a result, the horizontal scroll bar will display and can be utilized to read through the material instead of the vertical scroll bar (left to right).

I tried putting them in a container and then applying a white-space: nowrap style to the container, but it still wraps.

Ideas?

It appeared as follows:

UPDATE: See link for examples, although they were incorrect in claiming that there was no alternative option – I’m sure the material is old.

Asked by cgp

Solution #1

Try this:

If you leave out.slideContainer overflow-x: scroll; (which some browsers may or may not support at the time you read this), you’ll receive a scrollbar on the window rather than on this container.

Display: inline-block is the key here. Although this has good cross-browser support these days, it’s always a good idea to test it in all of the target browsers to make sure.

Answered by Ron DeVera

Solution #2

It only requires the following:

.slideContainer {
    white-space: nowrap;
}
.slide { 
    display: inline-block;
    width: 600px;
    white-space: normal;
}

Initially, I had float: left; which prohibited it from operating properly.

Thank you for providing this answer.

Answered by Demolishun

Solution #3

When applying padding or margin to a child div in CSS, white-space: nowrap; doesn’t always work, especially when using Twitter’s Bootstrap. Instead, use the following to create an analogous border: 20px solid transparent; using style instead of padding/margin works better.

Answered by brandonscript

Solution #4

As previously stated, you might make use of:

overflow: scroll;

Use the “auto” option if you only want the scroll bar to display when it’s needed:

overflow: auto;

I don’t think you should use the “float” property with “overflow,” but I’ll have to give your example a shot first.

Answered by jthompson

Solution #5

It appears that divs will not extend beyond the width of their body. Even inside the same div.

I put this up for testing (without a doctype) and it doesn’t operate as expected.

Because that is another page with potentially large content, I believe the inner divs might be loaded through an iFrame.

Answered by Ólafur Waage

Post is based on https://stackoverflow.com/questions/679804/prevent-wrapping-of-span-or-div