How to make a DIV not wrap

Question

I need to create a container DIV style that contains multiple other DIV s  It is asked that these DIV s wouldn t wrap if the browser window is resized to be narrow   I tried to make it work like below    lt style gt      container            min-width  3000px        overflow  hidden           slide            float  left        lt  style gt   lt div class  container  gt      lt div class  slide  gt something lt  div gt      lt div class  slide  gt something lt  div gt      lt div class  slide  gt something lt  div gt      lt div class  slide  gt something lt  div gt   lt  div gt    This works in most cases  However  in some special cases  the rendering is incorrect  I found the container DIV change to 3000px width in RTL of IE7  and it turns to be messy   Is there any other way to make a container DIV not to wrap

User · Answer

you can use   display  table    for your container and therfore avoid the overflow  hidden   It should do the job if you used it just for warpping purpose

User · Answer

The combo you need is   white-space  nowrap   on the parent and   display  inline-block     or inline   on the children

User · Answer

lt div style  height 200px width 200px border   white-space  nowrap overflow-x  scroll overflow-y  hidden   gt      lt p gt The quick brown fox jumps over the lazy dog  The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog     The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog     The quick brown fox jumps over the lazy dog     The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog     The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog  lt  p gt   lt  div gt

User · Answer

The following worked for me without floating  I modified your example a little for visual effect     x000D   x000D   container x000D    x000D      white-space  nowrap    Prevents Wrapping   x000D       x000D      width  300px  x000D      height  120px  x000D      overflow-x  scroll  x000D      overflow-y  hidden  x000D    x000D   slide x000D    x000D      display  inline-block    Display inline and maintain block characteristics    x000D      vertical-align  top    Makes sure all the divs are correctly aligned    x000D      white-space  normal    Prevents child elements from inheriting nowrap    x000D       x000D      width  100px  x000D      height  100px  x000D      background-color  red  x000D      margin  5px  x000D    x000D   lt div class  container  gt  x000D      lt div class  slide  gt something something something lt  div gt  x000D      lt div class  slide  gt something something something lt  div gt  x000D      lt div class  slide  gt something something something lt  div gt  x000D      lt div class  slide  gt something something something lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    The divs may be separated by spaces  If you don t want this  use margin-right  -4px  instead of margin  5px  for  slide  it s ugly but it s a tricky problem to deal with

User · Answer

Try to use width  3000px  for the case of IE

User · Answer

This worked for me    x000D   x000D   container   x000D    display  inline-flex  x000D    x000D   x000D   slide   x000D    float  left  x000D    x000D   lt div class  container  gt  x000D     lt div class  slide  gt something1 lt  div gt  x000D     lt div class  slide  gt something2 lt  div gt  x000D     lt div class  slide  gt something3 lt  div gt  x000D     lt div class  slide  gt something4 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    https   css-tricks com snippets css a-guide-to-flexbox

User · Answer

Try using white-space  nowrap  in the container style  instead of overflow  hidden

User · Answer

The  lt span gt  tag is used to group inline-elements in a document   source

User · Answer

The min-width property does not work correctly in Internet Explorer  which is most likely the cause of your problems   Read info and a brilliant script that fixes many IE CSS problems

User · Answer

overflow  hidden should give you the correct behavior  My guess is that RTL is messed up because you have float  left on the encapsulated divs   Beside that bug  you got the right behavior

User · Answer

If I don t want to define a minimal width because I don t know the amount of elements the only thing that worked to me was   display  inline-block  white-space  nowrap    But only in Chrome and Safari

User · Answer

None of the above worked for me   In my case  I needed to add the following to the user control I had created   display inline-block

User · Answer

Use display flex and white-space nowrap         x000D   x000D  p  x000D    display flex  x000D    white-space nowrap  x000D    overflow auto  x000D    x000D   lt h2 gt Sample Text  lt  h2 gt  x000D   x000D   lt p gt Some example text that will not wrap  lla et dictum interdum  nisi lorem egestas odio  vitae scelerisque enim ligula venenatis dolor  Maecenas nisl est  ultrices nec congue eget  auctor vitae massa  Fusce luctus vestibulum augue ut aliquet  Mauris ante ligula  facilisis sed ornare eu  lobortis in odio  Praesent convallis urna a lacus interdum ut hendrerit risus congue  Nunc sagittis dictum nisi  sed ullamcorper ipsum d lt  p gt  x000D   x000D   lt h3 gt Then some other text lt  h3 gt  x000D   x000D   x000D

[html] How to make a DIV not wrap?

Examples related to html

Examples related to css

Examples related to word-wrap

Examples related to nowrap