CSS layout & positioning

Start off the year with a 21-day portfolio challenge

Intermediate - Advanced
38min

If you're used to working with static design tools that let you drag and drop elements anywhere, building for the web can be a tough transition. This course on CSS layout and positioning covers the core concepts you'll need to start building with confidence for the web. You'll come away understanding the relationship between page elements and the many layout options available.

Dig into the world of HTML and CSS layouts — learn how they work together and get an overview of display properties like inline block and flexbox.

Yes, this course is from the future.

Use this version to clone the completed project
Blank pages without hitting page limits
  • Free (or paid) Webflow account — sign up
  • Chrome or Safari browser

Lessons in this course

The challenge

Challenge
Day
Be a website hero
01
The ultimate navbar
02
Magical CMS layout
03
Formulate leads and science
04
Virtual shoes for your site
05
Hello, it's responsiveness
06
Show off your project pages
07
Project pages working everywhere, anywhere
08
The optimum contact page
09
Show us your contact page
10
Test your Open Graph settings
11
Shine a light
12
Bring your portfolio to life
13
Lost, but never forgotten
14
Password-protected
15
Practice accessibility
16
Share your design in progress
17
Ready, set, publish!
18
Portfolio verification
19
Update your CMS
20
Showcase your portfolio
21

Summary

If you're used to working with static design tools that let you drag and drop elements anywhere, building for the web can be a tough transition. This course on CSS layout and positioning covers the core concepts you'll need to start building with confidence for the web. You'll come away understanding the relationship between page elements and the many layout options available.

Open the completed project
Open the project with
blank pages

Ready to get certified?

Once you’ve completed the Webflow Expert Certification Course, you’re all set to take the next step in becoming a Webflow Expert. Please note: passing the Expert exam does not guarantee entry into the Webflow Expert program.

Go to Webflow Experts exams

Course outline

Related courses

CSS layout & positioning

17
Lessons
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

Spacing

In the Style panel, you can define the spacing (margin and padding) for each element. In this article, we’ll cover what each of these layout controls is and how they’ll affect your elements. These properties make it possible to create responsive websites with content that reflows while creating consistent spacing.

Transcript
Download assets
Clone this project
Read the full article

Position

The position settings in the Style panel allow you to set the relative positioning of elements, the float settings, and the clear settings.

Transcript
Download assets
Clone this project
Read the full article

Flexbox

Flexbox, also known as flex or flexible box layout, allows you to control the alignment of elements in a box in any way you’d like — solving complex layout problems that designers have been struggling with for years.

Transcript
Download assets
Clone this project
Read the full article

Center elements with flexbox

Transcript
Download assets
Clone this project
Read the full article

Equal height layouts with flexbox

Transcript
Download assets
Clone this project
Read the full article

Grid

The grid layout in Webflow brings CSS grid to life on a completely visual canvas, giving you more direct control over your layout and design. With grid, you can reposition and resize items anywhere within the grid you define to produce powerful, responsive layouts — faster.

Transcript
Download assets
Clone this project
Read the full article

Flexbox vs. Grid

The similarities and differences between flexbox and grid — what to use and when.

Transcript
Download assets
Clone this project
Read the full article

Enable relative position

Transcript
Download assets
Clone this project
Read the full article

Apply a z-index value

In this lesson:

  1. What is a z-index value?
  2. Use a z-index value to stack elements
Transcript
Download assets
Clone this project
Read the full article

Hide overflowing content

Transcript
Download assets
Clone this project
Read the full article

Requirements

  • Free (or paid) Webflow account — sign up
  • Chrome or Safari browser
Clone this project
Use this version to clone the completed project
Clone this project
Blank pages without hitting page limits

Directed by

McGuire Brannon

Director of Education

Produced by

McGuire Brannon

Director of Education

Written by

McGuire Brannon

Director of Education

https://twitter.com/mcguirebrannon

Article by

Anna Kelian

Learning & Development Coach

Edited by

Stacy Han

Video Producer

Grímur Grimsson

Video Producer

Designs by

-

Related courses

There's more coming

We're rolling out more lessons very shortly. Sign up to get early access to additional Webflow lessons and courses.

Shoot, something didn't work. Try again later, bud.