Horizontal scroll css

Question

I want to have one  lt div gt  with id that has horizontal scroll  but the problem is it has to be responsive  not with fixed width   html  body  margin  0  padding  0     myWorkContent      width 530px      height 210px      border  13px solid  bed5cd      overflow-x  scroll      overflow-y  hidden      white-space  nowrap      myWorkContent a       display  inline-block      vertical-align  middle      myWorkContent img  border  0        lt div id  myWorkContent  gt        lt a href  assets work 1 jpg  gt  lt img src  http   placekitten com 200 200   height  190  gt  lt  a gt        lt a href  assets work 2 jpg  gt  lt img src  http   placekitten com 120 120    gt  lt  a gt        lt a href  assets work 3 jpg  gt  lt img src  http   placekitten com 90 90   height  90  width  90  gt  lt  a gt        lt a href  assets work 4 jpg  gt  lt img src  http   placekitten com 50 50   height  190  gt  lt  a gt        lt a href  assets work 5 jpg  gt  lt img src  http   placekitten com 100 100   gt  lt  a gt        lt a href  assets work 6 jpg  gt  lt img src  http   placekitten com 200 200   height  190  gt  lt  a gt   lt  div gt  lt  -- end myWorkContent -- gt    Thanks to http   jsfiddle net clairesuzy FPBWr   The problem is with that 530px  I would like to use 100  instead  But then I got page scroll and scroll of the DIV goes right  can not get it  any idea   Here is article in Serbian about solution http   www blog play2web com index php id 18

User · Accepted Answer

Just set your width to auto    myWorkContent      width  auto      height 210px      border  13px solid  bed5cd      overflow-x  scroll      overflow-y  hidden      white-space  nowrap      This way your div can be as wide as possible  so you can add as many kitty images as possible  3  Your div s width will expand based on the child elements it contains   jsFiddle

User · Answer

Below worked for me     Height  amp  width are taken to show that  if you 2 such children  it will scroll horizontally  since height of child is greater than height of parent scroll vertically   Parent CSS    divParentClass       width  200px      height  100px      overflow  scroll      white-space  nowrap      Children CSS    divChildClass       width  110px      height  200px      display  inline-block      To scroll horizontally only   overflow-x  scroll  overflow-y  hidden    To scroll vertically only   overflow-x  hidden  overflow-y  scroll

User · Answer

use max-width instead of width  max-width 530px   demo http   jsfiddle net FPBWr 161

User · Answer

I figured it this way       padding  0  margin  0   body   height  100   white-space  nowrap   html   height  100      red   background  red    blue   background  blue    yellow   background  yellow     header   width  100   height  10   position  fixed    wrapper   width  1000   height  100   background  green    page   width  10   height  100   float  left     lt div class  header red  gt  lt  div gt   lt div class  wrapper  gt       lt div class  page yellow  gt  lt  div gt       lt div class  page blue  gt  lt  div gt       lt div class  page yellow  gt  lt  div gt       lt div class  page blue  gt  lt  div gt       lt div class  page yellow  gt  lt  div gt       lt div class  page blue  gt  lt  div gt       lt div class  page yellow  gt  lt  div gt       lt div class  page blue  gt  lt  div gt       lt div class  page yellow  gt  lt  div gt       lt div class  page blue  gt  lt  div gt   lt  div gt    I have the wrapper at 1000  and ten pages at 10  each  I set mine up to still have  pages  with each being 100  of the window  color coded   You can do eight pages with an 800  wrapper  I guess you can leave out the colors and have on continues page  I also set up a fixed header  but that s not necessary  Hope this helps

User · Answer

Just make sure you add box-sizing border-box  to your  myWorkContent   http   jsfiddle net FPBWr 160

[html] Horizontal scroll css?

Examples related to html

Examples related to css

Examples related to overflow