CSS horizontal scroll

Question

I m trying to create a  lt div gt  with a series of photos which are horizontally scrollable only    It should look something like this LINK    However the above is only achieved by specifying a width for the  lt div gt  which contains the photos  so they don t  word-wrap    If I don t put a width - it looks like this LINK  What can I do using CSS to prevent putting in a fixed width as the images may vary    Thanks

User · Answer

Here s a solution with flexbox for images with variable width and height   container     display  flex    flex-wrap  no-wrap    overflow-x  auto    margin  20px    img     flex  0 0 auto    width  auto    height  100px    max-width  100     margin-right  10px     Example  JsFiddle

User · Answer

You can use display inline-block with white-space nowrap  Write like this    scrolls       overflow-x  scroll      overflow-y  hidden      height  80px      white-space nowrap    imageDiv img       box-shadow  1px 1px 10px  999      margin  2px      max-height  50px      cursor  pointer      display inline-block       display inline    For IE7        zoom 1    For IE7       vertical-align top       Check this http   jsfiddle net YbrX3

User · Answer

Use this code to  generate horizontal scrolling blocks contents   I got this from here http   www htmlexplorer com 2014 02 horizontal-scrolling-webpage-content html   lt html gt   lt title gt HTMLExplorer Demo  Horizontal Scrolling Content lt  title gt   lt head gt   lt style type  text css  gt   outer wrapper         overflow  scroll        width 100      outer wrapper  inner wrapper       width 6000px     If you have more elements  increase the width accordingly       outer wrapper  inner wrapper div box      Define the properties of inner block        width  250px      height 300px      float  left      margin  0 4px 0 0      border 1px grey solid     lt  style gt   lt  head gt   lt body gt    lt div id  outer wrapper  gt       lt div id  inner wrapper  gt           lt div class  box  gt               lt  -- Add desired content here -- gt              HTMLExplorer com - Explores HTML  CSS  Jquery  XML  PHP  JSON  Javascript           lt  div gt           lt div class  box  gt                lt  -- Add desired content here -- gt              HTMLExplorer com - Explores HTML  CSS  Jquery  XML  PHP  JSON  Javascript           lt  div gt           lt div class  box  gt               lt  -- Add desired content here -- gt              HTMLExplorer com - Explores HTML  CSS  Jquery  XML  PHP  JSON  Javascript           lt  div gt           lt div class  box  gt               lt  -- Add desired content here -- gt              HTMLExplorer com - Explores HTML  CSS  Jquery  XML  PHP  JSON  Javascript           lt  div gt           lt div class  box  gt                lt  -- Add desired content here -- gt              HTMLExplorer com - Explores HTML  CSS  Jquery  XML  PHP  JSON  Javascript           lt  div gt           lt div class  box  gt               lt  -- Add desired content here -- gt              HTMLExplorer com - Explores HTML  CSS  Jquery  XML  PHP  JSON  Javascript           lt  div gt           lt  -- more boxes here -- gt       lt  div gt   lt  div gt   lt  body gt   lt  html gt

User · Answer

check this link here i change display inline-block     http   cssdesk com gUGBH

User · Answer

try using table structure  it s more back compatible  Check this outHorizontal Scrolling using Tables

[html] CSS horizontal scroll

Examples related to html

Examples related to css

Examples related to horizontal-scrolling