Organizing Your Pictures with CSS Float

In the humble beginnings of my website’s picture page, I had a jumble of photos stacked on top of one another in a very aesthetically unappealing way. Although I will eventually advance to more sophisticated methods of displaying my photos, I found the CSS Float feature to be highly useful in arranging my photos in a more pleasing way  for the time being. My jumbled stack of photos has since been slightly upgraded, but it clearly needs a bit more work. For reference, take a look at the “before” image of my picture display.


Not bad, but it’s clear that the photos aren’t organized in a very neat and orderly fashion. This display was done in HTML table format, which is clunky and hard to optimize. So, here’s where CSS Float comes into play.

First, I created a class selector in the head of the code and titled it “rootBeerFloat,” but you can title it whatever you want, of course. Beneath this class sector, I specified how I wanted my pictures to “float.” You can choose right or left for this option, but my English left-to-right bias compelled me to choose left for my own website. After writing the placement code, I specified the margin code, which– after much experimentation– looked best at 6 pixels for my website. The details of this code are all featured below.

<style type=”text/css”>


In addition to specifying the margin, you can also make things easier on yourself by specifying the width and height of the images in measurements of pixels. I ended up deleting these specifications, however, because my mixture of vertical and horizontal photos didn’t work with a standard figure.

To arrange the floating pictures into two neat rows between the text in the pages, I created another class called “createEmptySpace.” This class basically just separated one row of images from another and also separated the images as a whole from the rest of the website. After specifying the two classes, I had to implement instances of the classes in the body of the code. I just listed out the images and tagged them with the class “rootBeerFloat.”



Then, I created instances of my “createEmptySpace” class, which separated the images into two rows. This code is featured below.

<img src=”project1/ChurchEditedFinal.jpg” width=”200″ height=”300″>
<img src=”project1/StreamersEditedFinal.jpg” width=”200″ height=”300″>
<img src=”project1/PewsEditedFinal.jpg” width=”400″ height=”300″>

<h3 class=”createEmptySpace” ></h3>

<img src=”project1/SceneEditedFinal.jpg” width=”400″ height=”300″>
<img src=”project1/LightsEditedFinal.jpg” width=”405″ height=”300″>

<h3 class=”createEmptySpace”></h3>

And here’s the CSS-simplified final result!


-Natalie Russell


~ by Madame Psychosis on September 17, 2012.

One Response to “Organizing Your Pictures with CSS Float”

  1. Hey Natalie!
    What a great DIY post! I find it very useful and quite easy to follow. Your instruction is clear for every step and I think it’s a good idea to compare the “before” and “after” pictures.
    You show us two methods to arrange the pictures. As I understand, you were going to talk about CSS Float at first, but for the second method that worked out for you, seemingly there’s nothing to do with float. Maybe you could change your title a little bit to better fit the content.

    Thank you!

    Yang Chen

Comments are closed.

%d bloggers like this: