Stop floating divs from wrapping

Question

I want to have a row of divs  cells  that don t wrap if the browser is too narrow to fit them   I ve searched Stack  and couldn t find a working answer to what I think should be a simple css question   The cells have specified width  However I don t want to specify the width of the row  the width should automatically be the width of its child cells    If the viewport is too narrow to accomodate the rows  then the div should overflow with scrollbars   Please provide your answer as working code snippet  as I ve tried a lot of the solutions I ve seen elsewhere  like specify width  100  and they don t seem to work    I m looking for a HTML CSS only solution  no JavaScript    x000D   x000D   row   x000D    float  left  x000D    border  1px solid yellow  x000D    width  100   x000D    overflow  auto  x000D    x000D   cell   x000D    float  left  x000D    border  1px solid red  x000D    width  200px  x000D    height  100px  x000D    x000D   lt div class  row  gt  x000D     lt div class  cell  gt a lt  div gt  x000D     lt div class  cell  gt b lt  div gt  x000D     lt div class  cell  gt c lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    At the moment I m actually hard coding the width of the row to a really big number

User · Answer

You want to define min-width on row so when it browser is re-sized it does not go below that and wrap

User · Answer

I had a somewhat similar problem where a bounded area consisted of an image in a float left block and a non-float text block   The area has a fluid width   The text would  by design  wrap up along the right side of the image   The trouble was  the text began with an  lt h2  tag  the first word of which is the tiny word  From    As I resized the window to a smaller width  the non-floated text would  for a certain range of widths  leave only the word  From  at the top of the wrap area  the rest of the text having been squeezed below the float block   My solution was to make the first word of the  tag bigger  by replacing the space that followed it with this code   lt span style  opacity 0   x lt  span     The effect was to make the first word  instead of  From    FromxNextWord   where the  x   being invisible  looked like a space   Now my first word was big enough not to be abandoned by the rest of the text block

User · Answer

For me  using bootstrap   only thing that worked was setting display absolute z-index 1 on the last cell

User · Answer

The CSS property display  inline-block was designed to address this need  You can read a bit about it here  http   robertnyman com 2010 02 24 css-display-inline-block-why-it-rocks-and-why-it-sucks   Below is an example of its use  The key elements are that the row element has white-space  nowrap and the cell elements have display  inline-block  This example should work on most major browsers  a compatibility table is available here  http   caniuse com  feat inline-block   lt html gt   lt body gt   lt style gt    row       float left      border  1px solid yellow      width  100       overflow  auto      white-space  nowrap      cell       display  inline-block      border  1px solid red      width  200px      height  100px     lt  style gt    lt div class  row  gt       lt div class  cell  gt a lt  div gt       lt div class  cell  gt b lt  div gt       lt div class  cell  gt c lt  div gt   lt  div gt     lt  body gt   lt  html gt

User · Answer

After reading John s answer  I discovered the following seemed to work for us  did not require specifying width     lt style gt   row       float left      border  1px solid yellow      overflow  visible      white-space  nowrap      cell       display  inline-block      border  1px solid red      height  100px     lt  style gt    lt div class  row  gt       lt div class  cell  gt hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello  lt  div gt       lt div class  cell  gt hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello  lt  div gt       lt div class  cell  gt hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello  lt  div gt   lt  div gt

User · Answer

The only way I ve managed to do this is by using overflow  visible  and width  20000px  on the parent element  There is no way to do this with CSS level 1 that I m aware of and I refused to think I d have to go all gung-ho with CSS level 3  The example below has 18 menus that extend beyond my 1920x1200 resolution LCD  if your screen is larger just duplicate the first tier menu elements or just resize the browser  Alternatively and with slightly lower levels of browser compatibility you could use CSS3 media queries   Here is a full copy paste example demonstration      lt  xml version  1 0  encoding  UTF-8   gt   lt  DOCTYPE html gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  gt   lt head gt   lt title gt XHTML5 Menu Demonstration lt  title gt   lt style type  text css  gt     border  0  box-sizing  content-box  color   f0f  font-size  10px  margin  0  padding  0  transition-property  background-color  background-image  border  box-shadow  color  float  opacity  text-align  text-shadow  transition-duration  0 5s  white-space  nowrap   a link  color   79b  text-decoration  none   a visited  color   579   a focus  a hover  color   fff  text-decoration  underline   body  background-color   444  overflow-x  hidden   body  gt  header  background-color   000  height  64px  left  0  position  absolute  right  0  z-index  2   body  gt  header  gt  nav  height  32px  margin-left  16px   body  gt  header  gt  nav a  font-size  24px   main  border-color  transparent  border-style  solid  border-width  64px 0 0  bottom  0px  left  0  overflow-x  hidden  important  overflow-y  auto  position  absolute  right  0  top  0  z-index  1   main  gt     gt     background-color   000   main  gt  section  float  left  margin-top  16px  width  100    nav id  menu    overflow  visible  width  20000px   nav id  menu    gt  ul  height  32px   nav id  menu    gt  ul  gt  li  float  left  width  140px   nav id  menu    gt  ul  gt  li  gt  ul  background-color  rgba 0  0  0  0 8   display  none  margin-left  -50px  width  240px   nav id  menu   a  display  block  height  32px  line-height  32px  text-align  center  white-space  nowrap   nav id  menu    gt  ul  float  left  list-style none   nav id  menu   ul li hover ul  display  block   p  p    span  span    color   fff   p  font-size  20px  margin  0 14px 0 14px  padding-bottom  14px  text-indent  1 5em    hidden  display  none    width 100  width  100     lt  style gt   lt  head gt    lt body gt    lt main gt   lt section style  height  2000px   gt  lt p gt Hover the first menu at the top-left  lt  p gt  lt  section gt   lt  main gt    lt header gt   lt nav id  location  gt  lt a href    gt Example lt  a gt  lt span gt  -  lt  span gt  lt a href    gt Blog lt  a gt  lt span gt  -  lt  span gt  lt a href    gt Browser Market Share lt  a gt  lt  nav gt   lt nav id  menu  gt   lt ul gt   lt li gt  lt a href    tabindex  2  gt Menu 1 - Hover lt  a gt   lt ul gt   lt li gt  lt a href    tabindex  2  gt Menu 1 B lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 1 B lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 1 B lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 1 B lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 1 B lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 1 B lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 1 B lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 1 B lt  a gt  lt  li gt   lt  ul gt   lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 2 lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 3 lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 4 lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 5 lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 6 lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 7 lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 8 lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 9 lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 10 lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 11 lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 12 lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 13 lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 14 lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 15 lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 16 lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 17 lt  a gt  lt  li gt   lt li gt  lt a href    tabindex  2  gt Menu 18 lt  a gt  lt  li gt   lt  ul gt   lt  nav gt   lt  header gt    lt  body gt   lt  html gt

[html] Stop floating divs from wrapping

Examples related to html

Examples related to css-float

Examples related to word-wrap