making a photobook layout with float

Hello everybody,

Today I would like to show you how make a very simple photo book layout named "monkey book" by using the power of float. It won't be extremly advanced, but trust me it doesn't have to be either.

For quite some people the float property is hard to understand at first. Hopefully though after you read this brief article you know what it could do for you.

In a nutshell float allows you to put block elements on the same line. While the normal behaviour of a block element is to start at a new line. Now why would we need float in case we need images on the same line. Aren't those images in-line elements? Exactly! But what if we want to put a little caption underneath it with the name?

In those cases it's nice to have the power of float in combination with a wrapper around both the image and the caption.

A simple mark-up could look like this.


Code:

<div class="image-holder">
     <img src="http://i55.tinypic.com/2d962ww.png" alt="" />
     <p>this monkey nr 1<br />this is line 2</p>
</div>

This little snippet doesn't look promising but it's in fact how the structure for the image holder looks like, a div with a class of image-wrapper (a class because we are going to use it more than ones). And inside an image a paragraph and a break (strict style
instead but that depends on your doctype)

Since we wrapped up the image and caption in one nice div we can easily target it and set properties for it. So lets do that!

Code:

.image-holder{
  float:left; /* all images should float left */
  margin:5px; /* some space around the div to give it some air */
  text-align: center; /* to center all content of the div */
  background:#0055BB; /* fancy background for the div */
  padding:3px; /*some padding to make the background reach 
               further than the width of the image */
  color:#fff; /* a nice contrasting color */
  }

So that is a the style! now how would it look with much more photo's
well have a look here: http://cssfreakie.webege.com/monkeybook.php
If you resize your window you can see what happens to the floated elements

Now I cheated a bit by using a php script to generate the images instead of putting in 80 images by hand.

The final script can be found here: But watch out! For production purposes use an external style sheet. It's always better to separate style from content.

happy coding and leave a comment if this was helpful or if you have questions or requests.

Cssfreakie