Preview

Start a free Courses trial
to watch this video

Column Layout with Media Queries

Name: Column Layout with Media Queries
Uploaded: 2015-11-10T14:25:22Z
Duration: 273 s
Description: In this video, you'll learn to display the columns side by side in medium and large screens, using floats.

4:33 with Guil Hernandez

In this video, you'll learn to display the columns side by side in medium and large screens, using floats.

Teacher's Notes
Video Transcript
Downloads

Column layout tips

To add a left gutter to all but the first column, you can use this:

.col + .col {
  padding-left: 1em;
}

To remove the right gutter from the column closest to the right edge of the page, use :last-child

.col:last-child {
  padding-right: 0;
}

Bringing it all together
This snippet floats all columns left and applies a right gutter. It applies a left gutter to all but the first column, so the first column will be flush with the left margin of the page. Then it removes the right gutter from last column, so that it's flush with the right margin of the page.

.col {
  float: left;
  padding-right: 1em;
}

.col + .col {
  padding-left: 1em;
}

.col:last-child {
  padding-right: 0;
}

You can also apply a gutter using just a left padding or margin value, like this:

.col {
  float: left;
}

.col + .col {
  padding-left: 1.5em;
}

In this video, I am going to display columns side by side, in medium and 0:00

large screens using floats. 0:04

In my style sheet I'll go inside the media query, and I'm going to float the columns 0:06

left by grouping the call class with the name selector here. 0:11

So right after the name class I'll add a comma and then add the class col. 0:16

So now both the name and columns will float left. 0:22

And at this break point I wanna display only two columns side by side. 0:27

If I place all three columns on the same line when the screen is 769 pixel wide, 0:32

the columns will appear too narrow on the screen, 0:37

making the content difficult to read. 0:40

So in this break point, I'm only going to give the primary and 0:43

secondary columns a width. 0:46

So right below the name and col rule, I'll create a new 0:48

rule that targets primary and the class secondary. 0:53

Then I'm going to set their width to 50%. 1:01

I'm not giving the tertiary column a width yet. 1:05

That column will appear below the primary and secondary columns in this break point. 1:08

So the tertiary column's width remains that base width of 100% and 1:12

we'll see that in the browser in just a few. 1:17

Next, right below the top media query I'm going to define a second media 1:20

query to write the column and container styles for a wider three column layout. 1:26

So I'll create a new media query by typing @media. 1:32

And this break point will be at a min-width of 1025 pixels. 1:37

So when the view port or device is 1025 pixels or wider. 1:46

The styles written here will be applied to the layout. 1:51

In this new media query, I'll create a new rule 1:54

that targets container and then I'll set its width to 80%. 1:57

So it's a little narrower than the 90% width given to 2:02

container in the 769 breakpoint. 2:07

Right below the width declaration I'm going to define a max 2:13

width of 1150 pixels so 2:19

that the layout doesn't get too wide when the screen is 1025 pixels or wider. 2:21

So in this break point all three columns will be laid out side by side on the same 2:26

line and I want the primary column to be slightly wider than the secondary and 2:30

tertiary columns. 2:36

So I'm going to target the primary column and give it a width of 40%. 2:38

Then right below, I'll target the secondary and tertiary columns. 2:47

And I'm going to set their width value to 30%. 2:58

So the primary column is 40% while secondary and tertiary are 30%. 3:00

So together that adds up to a total width of 100%. 3:07

So the float inside 3:11

the main header and column containers cause the container's height to collapse. 3:15

And we know this because the layout and the header and columns, looks broken. 3:21

So we no longer see the main header background and 3:25

the footer content is actually wrapping around the right column. 3:28

And the footer is also displaying near the middle of the page. 3:33

Fortunately you know the fix for this. 3:36

So the CSS already has a clear fix rule. 3:38

So back in index.html 3:42

I’m going to apply the clearfix class to the collapsing containers. 3:45

First I will add the clearfix class to the container inside main-header. 3:49

So right after the container class, I’ll type clearfix. 3:54

Then I’ll scroll down to the column container and add the class clearfix. 3:59

And now the header and columns look great. 4:07

So that's it. 4:09

My best city guide layout is complete. 4:10

Great work so far. 4:22

Up next, you'll learn how to place elements, like navigation menus and 4:24

icons anywhere on the page, using relative, absolute, and fixed positioning. 4:28

You need to sign up for Treehouse in order to download course files.

CSS Layout Basics

Column Layout with Media Queries

Column layout tips