Displaying divs not inline with each other

HTML & CSS
1

Hey,

I have the following css, which 30 images use for each one, it displays them quite happily next to each other and then wraps as expected to the next line

	.image {
		width:26.6%;
		display:inline-block;
		vertical-align:top;
		padding:5px;
		}

what were trying to do is to get those that wrap to go directly under the div above it and not inline with the longest one, ive been trying for hours and just cant seem to get it to work… does anyone have an idea what ive messed up?

2

Hi,

We’ll need a bit more info than that to debug I’m afraid as it will depend on the size of the images and the alignment of the parent and whether you have any conflicting rules :slight_smile:

Here’s a demo of an inline-block gallery that may help (it’s aligned to the centre but that can be changed by setting text-align:left on the main parent).

If you can post a reduced working example (or a link to the real thing) I;ll take another look :slight_smile:

3

morning :slight_smile:

thanks for replying
below is the link to the page, basically what were trying to get it to do is to make the div’s underneath go directly under the other ones, instead of being inline with the longest image… there will be 2 sizes as the width is done via percent so will portrait and landscape images and needs to just go under the other for either :slight_smile:

http://www.dev.webtastix.net/rachaelmckenna/?page=portfolio&imagecat=3

4

Hi,

I think I understand what you want in that you want the smaller images to ride up underneath rather than always being rows which are dictated by the tallest image?

If this is what you wanted then unfortunately there is no automatic way to do this with CSS alone. You would need a script to do this and there are a number about.

Or with css3 columns for modern browsers but (isn’t really automatic):

http://sickdesigner.com/masonry-css-getting-awesome-with-css3/

Is that what you meant :slight_smile:

5

Hey Paul,

Thanks for that, yep that’s what I was thinking :slight_smile: im glad it wasn’t something simple I was just missing then :wink:

will give one of those scripts a try as it needs to work with somewhat older browsers as well :slight_smile:

thanks for the help :slight_smile: :slight_smile: