HTML make child div expand beyond parent div (without width: 9999px)

Question

I'm having a hard time with HTML/CSS now. I'd love to create some sort of a slider with images placed side by side with hidden overflow (so when you press "next" arrow it will "move" pictures to the left (hiding the left one and showing the one that was hidden).

The problem is I can't make my div to go beyond its parent thus I can't line up my images side by side.

It looks like this:

 <div id="slider"> <div id="images"> <div class="image_container"> <img src="" alt="1"/> </div> <div class="image_container"> <img src="" alt="2"/> </div> ... <div class="image_container"> <img src="" alt="3"/> </div> </div> </div> 

Where #slider should be at 95% of width and preferably height based on content, #images should have "no width" - it should be based on the content and max-height ~, .image_container should have the width of the img - these should line up one next to another.

Any ideas how can I achieve that? I've been trying lots of things and none of them work.

Answer 1

Set the display property of the child elements to inline-block and the white-space property of the parent to nowrap .

 #parent{ background:#000; height:100px; padding:5px; white-space:nowrap; width:200px; } #parent>div{ display:inline-block; height:100%; width:100%; } #parent>div:nth-child(odd){background:#f00;} #parent>div:nth-child(even){background:#0f0;} 

 <div id="parent"><div></div><div></div><div></div><div></div><div></div></div>