Not sure if this should be here or in graphics, but think it is more a site problem than image.
I’m trying to put together a webpage that has a series of pictures (12 in all) that I would like displayed in a nice grid (3 across 4 down). Using CSS, I can get it all setup, but when I attempt to put captions under them the layout gets all messed up. If I wanted pictures with captions in a grid like that would I be better off doing it using tables?
Thanks for any advice, doing my best to start designing using standards, just not sure what standard to follow here!
Try something like this
<img src="some-image.jpg" alt="Some Image"/>
of course you need to adjust the heights to fit your needs
There are many ways to do this and all depend on the criteria that you want.
For elements of a set width I would do something like this example (just view source). The reason they are not floated and use display:inline-box instead is to allow for the caption to wrap to two lines without snagging in the way that floats would.
Thank you Paul, that worked out great, took a little bit more tweaking (and still have more to do) but it’s really close now and I can figure it from here (I hope).
I tried your solution Scallio and while I’m sure it’s workable, there must have been something else about my code that was causing it to not list in a table like I wanted. Instead it was just a straight column down the left hand side.
I appreciate all the help though as every solution enlightens me to other features and functions and how to put them to use in the future.
I was looking for such a photo gallery webpage. Thanks a lot Paul.
I need to customize it and add it to my website template.