Grow your CSS skills. Land your dream job.

another CSS Positioning Questions

  • # October 13, 2012 at 12:59 pm

    I don’t seem to be able to apply css positioning. I have a layout of images with borders and a large bottom padding to include some text like a caption.

    Each image is set within a parent div which has position:relative. Within the parent div I’ve created a child div with position:absolute to insert some headings and paragraphs. I’ve also tried setting the child div with position:relative but in either case I cant get the child div to sit underneath the image. I thought position:absolute would allow me to position the div relative to the parent div?

    [Here's the page.](http://www.margonline.co.uk/kjx/case.php “the page”) If anyone can suggest how I would position the child div within the parent div, I’d be grateful.

    # October 13, 2012 at 2:30 pm

    Instead of all that positioning, why not use the figure/figcaption elements and floats?

    http://codepen.io/anon/pen/wvjGC

    # October 13, 2012 at 4:03 pm

    Looking at your site, I don’t see the image or the caption being positioned absolute. The caption is commented out as well. It’s a little difficult to troubleshoot this way.

    @Paulie_D : normally I would agree but with absolute positioning, it’s easy to make sure that the captions are always at the same height, regardless of the image height.

    # October 13, 2012 at 7:48 pm

    @Paulie_D – such a simple and elegant solution! Wish I had thought of it.

    @Senff – thanks for replying, I commented out the ‘caption’ to show the images displaying nicely, but I guess it didn’t help with the troubleshooting. I’m still not sure why the absolute positioning didnt work :( so I’ll probably be posting here again.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".