Prevent wrapping of span or div

Question

I d like to put a group of div elements of fixed width into a container and have the horizontal scroll bar appeared  The div span elements should appear in a line  left to right in the order they appear in the HTML  essentially unwrapped    This way the horizontal scroll bar will appear and can be used instead of the vertical scroll bar for reading through the content  left to right     I ve tried floating them in a container and then putting a white-space  nowrap style on the container  but alas  it still seems to wrap   Ideas   It looked like this    x000D   x000D   slideContainer   x000D      white-space  nowrap  x000D    x000D   slide    x000D      width  800px  x000D      float  left  x000D      display  inline  x000D    x000D   lt div class  slideContainer  gt  x000D       lt div class  slide  gt Some content lt  div gt  x000D       lt div class  slide  gt More content lt  div gt  x000D       lt div class  slide  gt Even More content  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    UPDATE  See site for examples  but they were wrong about not being another way - I m sure the article is old though

User · Answer

Looks like divs will not go outside of their body's width. Even within another div.

I threw this up to test (without a doctype though) and it does not work as thought.

_x000D_

.slideContainer {_x000D_
    overflow-x: scroll;_x000D_
}_x000D_
.slide {_x000D_
    float: left;_x000D_
}

_x000D_

<div class="slideContainer">_x000D_
    <div class="slide" style="background: #f00">Some content Some content Some content Some content Some content Some content</div>_x000D_
    <div class="slide" style="background: #ff0">More content More content More content More content More content More content</div>_x000D_
    <div class="slide" style="background: #f0f">Even More content! Even More content! Even More content!</div>_x000D_
</div>

_x000D_

What i am thinking is that the inner div's could be loaded through an iFrame, since that is another page and its content could be very wide.

User · Answer

Particularly when using something like Twitter s Bootstrap  white-space  nowrap  doesn t always work in CSS when applying padding or margin to a child div  Instead however  adding an equivalent border  20px solid transparent  style in place of padding margin works more consistently

User · Answer

It works with just this    slideContainer       white-space  nowrap     slide        display  inline-block      width  600px      white-space  normal      I did originally have float   left  and that prevented it from working correctly   Thanks for posting this solution

User · Answer

Try this    x000D   x000D   slideContainer   x000D      overflow-x  scroll  x000D      white-space  nowrap  x000D    x000D   slide   x000D      display  inline-block  x000D      width  600px  x000D      white-space  normal  x000D    x000D   lt div class  slideContainer  gt  x000D       lt span class  slide  gt Some content lt  span gt  x000D       lt span class  slide  gt More content  Lorem ipsum dolor sit amet  consectetur adipisicing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  span gt  x000D       lt span class  slide  gt Even more content  lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    Note that you can omit  slideContainer   overflow-x  scroll     which browsers may or may not support when you read this   and you ll get a scrollbar on the window instead of on this container   The key here is display  inline-block  This has decent cross-browser support nowadays  but as usual  it s worth testing in all target browsers to be sure

User · Answer

As mentioned you can use   overflow  scroll    If you only want the scroll bar to appear when necessary  you can use the  auto  option   overflow  auto    I don t think you should be using the  float  property with  overflow   but I d have to try out your example first

[html] Prevent wrapping of span or div

Examples related to html

Examples related to css