Horizontal scroll css?

Question

I want to have one <div> 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;} 

<div id="myWorkContent">      <a href="assets/work/1.jpg"><img src="http://placekitten.com/200/200/" height="190"></a>      <a href="assets/work/2.jpg"><img src="http://placekitten.com/120/120/"/></a>      <a href="assets/work/3.jpg"><img src="http://placekitten.com/90/90/" height="90" width="90"></a>      <a href="assets/work/4.jpg"><img src="http://placekitten.com/50/50/" height="190"></a>      <a href="assets/work/5.jpg"><img src="http://placekitten.com/100/100/"></a>      <a href="assets/work/6.jpg"><img src="http://placekitten.com/200/200/" height="190"></a> </div><!-- end myWorkContent --> 

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

Answer 1

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