Make content horizontally scroll inside a div

Question

I have a division in which I wanna show images and on click open them in a lightbox  I have floated them left and displayed them inline  set overflow-x to scroll but it still puts the images below once the row space is not enough  I wanna get them to be inline and display a horizontal scroll when needed   NOTE  I can t change the structure of the images inside  It has to be a img inside an anchor  My lightbox requires it like that   HTML    lt div id  myWorkContent  gt       lt a href  assets work 1 jpg  gt  lt img src  assets work 1 jpg  height  190    gt  lt  a gt       lt a href  assets work 2 jpg  gt  lt img src  assets work 2 jpg  height  190    gt  lt  a gt       lt a href  assets work 3 jpg  gt  lt img src  assets work 3 jpg  height  190    gt  lt  a gt       lt a href  assets work 4 jpg  gt  lt img src  assets work 4 jpg  height  190    gt  lt  a gt       lt a href  assets work 5 jpg  gt  lt img src  assets work 5 jpg  height  190    gt  lt  a gt       lt a href  assets work 6 jpg  gt  lt img src  assets work 6 jpg  height  190    gt  lt  a gt   lt  div gt  lt  -- end myWorkContent -- gt    CSS    myWorkContent      width 530px      height 210px      border  13px solid  bed5cd      overflow-x  scroll      overflow-y  hidden     myWorkContent a       display  inline      float left     I know this is very basic but I just can t get it done  Don t know what s wrong

User · Accepted Answer

It may be something like this in HTML    lt div class  container-outer  gt      lt div class  container-inner  gt         lt  -- Your images over here -- gt      lt  div gt   lt  div gt    With this stylesheet    container-outer   overflow  scroll  width  500px  height  210px     container-inner   width  10000px      You can even create an intelligent script to calculate the inner container width  like this one     document  ready function        var container width   SINGLE IMAGE WIDTH       container-inner a   length         container-inner   css  width   container width

User · Answer

marcio-junior s answer  https   stackoverflow com a 6497462 4038790  works perfectly  but I wanted to explain for those who don t understand why it works    a7omiton Along with  psyren89 s response to your question   Think of the outer div as a movie screen and the inner div as the setting in which the characters move around  If you were viewing the setting in person  that is without a screen around it  you would be able to see all of the characters at once assuming your eyes have a large enough field of vision  That would mean the setting wouldn t have to scroll  move left to right  in order for you to see more of it and so it would stay still    However  you are not at the setting in person  you are viewing it from your computer screen which has a width of 500px while the setting has a width of 1000px  Thus  you will need to scroll  move left to right  the setting in order to see more of the characters inside of it   I hope that helps anyone who was lost on the principle

User · Answer

Same as what clairesuzy answered  except you can get a similar result by adding display  flex instead of white-space  nowrap   Using display  flex will collapse the img  margins   in case that behavior is preferred

User · Answer

if you remove the float  left from the a and add white-space  nowrap to the  outer div  myWorkContent      width 530px      height 210px      border  13px solid  bed5cd      overflow-x  scroll      overflow-y  hidden      white-space  nowrap     myWorkContent a       display  inline     this should work for any size or amount of images   or even   myWorkContent a       display  inline-block      vertical-align  middle     which would also vertically align images of different heights if required test code

User · Answer

The problem is that your imgs will always bump down to the next line because of the containing div     In order to get around this  you need to place the imgs in their own div with a width wide enough to hold all of them   Then you can use your styles as is   So  when I set the imgs to 120px each and place them inside a   div insideDiv      width 800px      it all works   Adjust width as necessary   See http   jsfiddle net jasongennaro 8YfRe

[html] Make content horizontally scroll inside a div

Examples related to html

Examples related to css