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.
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″>
And here’s the CSS-simplified final result!