This course will be retired on July 12, 2021. We recommend "Mobile-First CSS Layout" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Start a free Courses trial
to watch this video
You've learned a lot about CSS floats in this section of course. Now it's your turn to lay out parts of the design using floats.
Resources
Video review
- Give each column inside the main container a fluid width.
- The 'primary' column can be 60% wide and the 'secondary' column can be 40% -- it's up to you.
- Use floats to display both columns horizontally so that they appear on the same line.
- You're building the column layout using a mobile first approach, so the horizontal layout should apply to large screens only.
- Be aware of collapsing containers caused by floats.
Related videos
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;
}
You need to sign up for Treehouse in order to download course files.
Sign up