CODEWITHSUNDEEP
htmlcssimagegalleryphoto
Sandy Kates Davis
Sandy Kates Davis

Reputation: 11

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

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!

Upvotes: 1

Views: 246

Answers (1)

joosts
joosts

Reputation: 164

You could create an HTML page which contains divs 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 positioning (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...

Upvotes: 1

Related Questions