Multiple DIVs evenly spaced side-by-side within container DIV?

Hello,

I would like to know if there are any clean methods to create a CSS-only, x-browser (incl. IE) compatible method to solve the following problem.

I would like to create an image gallery-type container DIV, which contains multiple smaller DIVs (each wrapping a thumbnail image and caption) that render side-by-side and evenly spaced (centered) across the width of the container DIV. If the container DIV resizes too small, the smaller DIVs will wrap to a second row.

I have found several great solutions to building CSS-only image gallery DIVs. However, almost all of these use the {float: left;} attribute which does not space evenly across the container DIV. Here’s my current code, which works OK for my application by tweaking the padding/margin between the float left-positioned DIVs, but does not scale well to different screen resolutions:

.imageBoxContainer, {
padding: 8px 5% 23px 5%;
text-align: center;
}

.imageBoxContainer .thumbnail {
float: left;
width: 160px;
height: 160px;
border: 1px solid #999;
margin: 3px 3% 6px 3%;
padding: 3px;
}

.imageBoxContainer .thumbnail img {
float: none;
margin-top: expression(( 160 - this.height ) / 2);
}

Thanks for any assistance or relevant links.

Bob

Hi,

I would like to create an image gallery-type container DIV, which contains multiple smaller DIVs (each wrapping a thumbnail image and caption)

This isn’t really feasible with css at the moment as the images need to be inline so that they can be centred properly but this won’t allow you to set captions.

The simplest solution would be to caption the images themselves in your paint package but obviously this isn’t always feasible with lots of images.

You are stuck with either floating them left as you have done or displaying them inline but without captions. Even if you use a table you will not be able to make them wrap etc.

Opera7 understands display:inline-block; which would do the trick very nicely but no other browsers understand it :(.

Sorry

Paul

Paul, many thanks for the quick response. I will play around with setting the margins of the inner DIVs by percentage and see if that yields any better results.

Here’s one pseudo-fix I found that uses a separate ID for each inner DIV – not terribly scalable, but it might work for my problem.

The simplest solution would be to caption the images themselves in your paint package but obviously this isn’t always feasible with lots of images.

Yes, I thought about this. Alternatively, I guess I could also place the captions in the ALT attribute. For this particular problem, however, I must display the caption (actually, the manufacturer’s name) beneath each image.

Thanks again for your suggestions – I truly appreciate it.

Bob

Hi Bob,

Well I do have an example that works by forcing quirks mode for ie and then uses display table for mozilla and display:inline:block for Opera7 (so it contains a few hacks I’m afraid).

Basically IE in quirks mode will centre nested elements and not just text so we can use that to our advantage. Mozilla uses the display:table style which sorts that out ok. This is about the nearest I’ve ever got to this.

This works in ie5 - 6, mozilla,firefox and opera7 but I shouldn’t think you’d get much change from older browsers though.

I was going to save this for one of my quizzes but if its any use to you then you can play around with it. I don’t know how it will hold up but it looks ok as is.

http://www.pmob.co.uk/temp/centremultipledivs.htm

Hope that helps anyway.

Paul

Paul,

THANKS! This looks exactly what I was looking for, and appears to render great. I’ll work on implementing it over the next few days, and report back here.

I truly appreciate you taking time to respond and post this solution. Thanks again.

Bob

Paul,

Just a quick follow-up to say that I was able to implement your solution with the project I am working on, and I just wanted to say that the results look OUTSTANDING!!! Many thanks again for sharing this creative and enlightening example.

All others: be sure you include the XML prologue in your HTML document headers as specified in the comments of the example:

<?xml version="1.0" encoding="iso-8859-1"?>

The CSS quirks won’t work without it. Paul included this note in the comments of the example, but it took me a while to figure it out, as I am a product of Texas public schools…
:idea:

Thanks again, Paul - can’t say it enough. Once the site goes live, I’ll try to remember to post the URL here so all can see the example in action – not in a position to do so just yet.

Bob

Thanks Bob - look forward to seeing the finished product :slight_smile: