0

I have a website where I'm attempting to allow character creation/customization. Thing is, I'm trying to make the images stack on top with each other. I already have the JavaScript / PHP worked out on this, and I can get them to stack correctly, but the problem is trying to keep the images inside the main div without displaying outside of it, or using position: absolute.

Can I have some help with this?

MrWhite
  • 43,179
  • 8
  • 60
  • 84
SDCore
  • 23
  • 4
  • 4
    Could you please provide a little more detail on what you mean by getting them to stack correctly with js/php? What is the current behavior? – Tracy Fu Jan 04 '13 at 23:31
  • 1
    Yes we will need more actual code..... Also try display:block – d-_-b Jan 04 '13 at 23:34
  • 1
    Why are you not able to use `position:absolute`? How are you currently getting them to "stack correctly"? – MrWhite Jan 04 '13 at 23:36
  • Are you floating elements? If sounds like you might be having a clearfix problem. http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best – Malk Jan 04 '13 at 23:37

3 Answers3

1

Without more information, it's kind of hard to form a substantive solution. If you're already able to correctly stack and position your images, my guess would be to try setting the CSS property overflow: hidden on your containing div and to define a specific width and height for the div.

Here's my fiddle

I absolutely positioned the sample images since it seems like the problem isn't with your images, but with your container. Please let me know if I'm looking in the right direction.

Tracy Fu
  • 1,632
  • 12
  • 22
0

You might be able to use position:relative, depending on your requirements.

Michael Richardson
  • 4,213
  • 2
  • 31
  • 48
0

Does putting the images in a list solve your problem?

Example: 

 <ul>
    <li>image 1</li>
    <li>image 2</li>
    <li>image 3</li>
    <li>image 4</li>
 </ul>
user1929705
  • 21
  • 1
  • 8