How do I create a photo gallery with same widths and different heights using HTML/CSS?

Question

I am a beginner to HTML and CSS. I want to create a photo gallery where all the columns are the same width, but each photo could have a different height. But I want all the photos to "hug" each other, so that the photos in the second row may not start in the same vertical position as each other. How do I accomplish that? Just saw something about columns - maybe that would work? I'm grateful for any help available!

Answer 1

You could create an HTML page which contains div s for each column.

You could then either use your CSS stylesheet to place the columns together: - either float all these column div to left (refer to W3C school's CSS floating ), or by - using relative or absolute position ing (refer to W3C school's CSS positioning ) and give each div an X and Y coordinate.

Then give each column div a preset width (refer to W3C school's CSS width and max-width ).

Every item in a column will then move to a new row (when it has static positioning, which is default for most tags). So just give each image in that column the same fixed with an you should be fine...