Adjusting container div using JS

Question

I am currently struggling with a site and I have no idea where to start on this bit of code.

I have a container div, .overflow-block1, which has 4 image divs in them, .block-container. These are automatically pulled in via php and JS and there are 54 image blocks in this container.

Currently I am using JS to add a class to the .overflow-block which increases its width to 25750px to fit all the image blocks next to each other in a single row.

The problem with this is that as content gets added they now need more width so I have to manually add more width, but content will be added regularly and I do not wish to spend the rest of my life changing the width of this block every time content is added.

Can anyone point me in the right direction to use JS to automatically set the container width to fit all the image blocks?

Thank you

Answer 1

As I've written on a comment, here is a solution only with CSS.

 #parent { overflow-x: hidden; width: 190px; } #container { white-space: nowrap; border: 1px solid #f0f; width: 190px; overflow-x: visible; } #container>div { background: #ccc; width: 50px; height: 50px; display: inline-block; /* for IE6/7, remove if you don't need to support those browsers */ *display: inline; zoom: 1 } 

 <div id="parent"> <div id="container"> <div>aaa</div> <div>bbb</div> <div>ccc</div> <div>ddd</div> <div>eee</div> <div>fff</div> </div> </div>