For this post we’ll be making a simulated photo blog. The page is going to have nine photos in a 3 by 3 grid. You can download the photos that we’ll be using here. But first we’ll need to learn the CSS float property.
Let’s start by making a simple HTML file with 2 DIV’s. We’ll name then DIV 1 and DIV 2 with id’s of “one” and “two”.
We’ll make a CSS file and link in the HTML head section to give our DIV’s a background color. I’m using red and blue, but you can use whichever colors you like.
Notice how the background color is all the way across the page? If you remember from the last post, that is because we are styling the element itself and NOT the content of the element.
Let’s give both DIV’s a width of 100px to see what happens.
What if you wanted the DIVs side by side and not on top of one another? One way to do this is with the CSS float property. Float takes an element out of the normal “flow” of an HTML page. Think of it as if an element were in outer space with no gravity. The element floats to the top and bumps into other elements. In this example, DIV 2 will ‘float’ and bump against DIV 1. We’ll set out DIVs to float left.
We can also float the DIVs right.
In this case, div 1 goes “floats’ all the way to the right and dive 2 goes up and bumps up agianst it.
Let’s use this property to make our 3×3 grid of photos. Let’s take a look at the HTML.
As you can see, it’s simply nine image tags. the output in the browser is nine photos. If we maximixe the browser we do get a nice 3×3 grid. That’s a good start, but that is due to the size of the photos. If we want them in a grid the correct way, and stay in a grid when the browser is re-sized, we’ll need to do a little more. Lets’s start by adding linking to a stylesheet. I called mine photos.css
We’ll start by giving our images a width. Let’s try 100px to start.
Now all of lthe photos are on one line. There is a little bit of white space between each of the photos that we didn’t ask for. That white space is one of the quirks of HTML. When you have images without anything else HTML will add its own white space. We’ll get rid of that using the float property.
Better. We’ve got all the photos on a signle line without spaces. But how do we get them in a grid?
Instead of giviing them a width of 100px, we can make each photo take up 30% of the width. That should put 3 photos on one line, 3×30% = 90%, and give us 10% of the width to add our own white space. Using a percentage of the width also gives us the added bonus of making our page responsive.
Looking better. Now let’s add some space between the photos. Not the white space that HTML adds on it’s own, we want to be able to control how much space there is between the photos.
We can add space between the photos using the CSS margin property. If you remember from this post, margin is the space between elements. Each photo has 4 margins: top, right, bottom, and left. Since we’re working with width, (try saying that ten times fast!), we’re more concerned with the left and right margins of each photo in our row. That’s a total of six margins (3 photos x 2 margins each). We have 10% of the width to play with. 10 / 6 is approximately 1.66%. So we’ll give each photo a margin of 1.66%. We could use magin-left and margin-right, but using just margin will give us the added benefit of having a uniform space between each row also.
If you’ve been coding along, try adjusting the size of the browser. You should find that the photos scale to adjust to the browswer size and that we keep our 3×3 grid.
In the next post we’ll add some fancy text to our “photo blog” page.
Properties To Remember