Alisen Hazzard

the Blog

Easy CSS Layout - Two Column Photo Album

Posted on July 15th, 2014

There are many effective ways to style photos on a website using responsive design. I have experimented with Masonry (a JavaScript grid layout), Flexbox, and other grid-based layouts for the structure of my photo albums, but these techniques don't work for some sites. Here is a floating two column structure. The limited amount of code needed is also a plus.

I wanted to do a little code takeaway and share the code that ended up working for me - it’s pretty simple to implement, and it works great with a small adjustment in the media queries for different screen resolutions.

HTML
<div class="col-wrapper">
	<div class="col-left">
		<img src="[img location]" class="col-img"/>
		<img src="[img location]" class="col-img"/>
		<img src="[img location]" class="col-img"/>
	</div>
	<div class="col-right">
		<img src="[img location]" class="col-img"/>
		<img src="[img location]" class="col-img"/>
		<img src="[img location]" class="col-img"/>
	</div>
</div>

CSS
.col-img {
	display: table;
	margin: 20px 10px;
	max-width: 250px;
}
.col-left,
.col-right {
	float: left;
	width: 50%;
}
.col-wrapper {
	display: table;
	margin: 20px auto;
	max-width: 810px;
}

@media screen and (min-width: 990px){
	.col-img {
		max-width: 330px;
	}
}

This is what the code looks like with images in place:

Image of Fern Canyon Image of Fern Canyon Image of Fern Canyon
Image of Fern Canyon Image of Fern Canyon Image of Fern Canyon

A few notes:

  1. I formatted my photos to be small to begin with, since the max-width in the media query is only 330px. This will keep your load-time fast, which is great when you have tons of images.
  2. If you want, you can adjust the layout to be single-column in small screen sizes, and add a media query to give it a two-column structure when the screen reaches a larger size.
  3. As it is, the photo columns start to overlap when the screen reaches about 600px, so you'll want to play with the formatting for smaller screen sizes.
  4. Because you can use images of any size, the column heights don’t line up on their own; you’ll probably need to rearrange the photos so the columns end at the same place. The good news is, go ahead and add as many images as you want!

There you go guys! Let me know how it works for you. @alisenhazzard

Tagged in: Web Design CSS