Floating columns

So, back to the order of our business here: floating the three columns on our home page. To do this, I want to give each div tag a class of column that we can style. So, in the HTML, let's go to each div tag in the secondary section and use the nice multiple cursor feature of Sublime Text to add class="column" to all three of them at once:

<section class="secondary-section"> 
    <div class="wrapper">
        <div class="column">...</div>
        <div class="column">...</div>
        <div class="column">...</div>
    </div> 
</section>

In my CSS I have made a big comment denoting this section of my CSS for these three columns, I encourage you to as well.

Under this comment, we'll target .column and apply float: left. The width will be 320px.

/**************** 
3 columns 
****************/ 
.column { 
  float: left; 
  width: 320px; 
} 

Ideally, whenever you float elements, try to add a width. If all three columns are 320px , that's going to add up to exactly 960 pixels and fit the width of that wrapper perfectly. If we were to use a number that added up to more than 960 pixels, then not all of the three div tags would fit in that space. One would wrap to the bottom so they wouldn't have all the three div tags on one row. It's important that the width of all the floated div tags is never more than the parent div tag. So save this and refresh the site:

It looks like all the three columns are floated next to each other. That worked out pretty well, except we don't have any margin between columns. So let's go back to our code and let's give it a margin-left property of 30px. Save this and refresh the browser:

.column { 
  float: left; 
  width: 320px; 
  margin-left: 30px; 
} 

Following is the output of preceding code block:

We get a margin of 30px, but we also get our third column drifted down to the bottom because it can't fit in the width allowed.

Let's fix this by reducing the width of the columns to 300px each:

.column { 
  float: left; 
  width: 300px; 
  margin-left: 30px; 
} 

Now if you look at the browser, you will also see that we don't need a margin-left on the first column. We don't need a left margin next to empty space:

Let's get rid of this margin left on the first column. We can do this by targeting that individual .column property using a pseudo class called first child.