All courses
CSS layout & positioning
Login with your Webflow account to track your progress

CSS layout & positioning

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.

We’re transitioning to a new UI, and are in the process of updating our Webflow University courses and videos.

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.

Table of contents

1

Getting started

Coming soon

1

Intro to the box model
3:04
Intro to the box model
Coming soon

1

Display settings
10:48
Display settings
Coming soon

1

Spacing
6:28
Spacing
Coming soon

1

Size
17:35
Size
Coming soon

1

Position
16:51
Position
Coming soon

1

Flexbox
8:08
Flexbox
Coming soon

1

Center elements with flexbox
1:20
Center elements with flexbox
Coming soon

1

Equal height layouts with flexbox
1:47
Equal height layouts with flexbox
Coming soon

1

Grid
14:15
Grid
Coming soon

1

Flexbox vs grid vs Quick Stack
5:32
Flexbox vs grid vs Quick Stack
Coming soon

1

Enable relative position
1:43
Enable relative position
Coming soon

1

Absolute Positioning
1:43
Absolute Positioning
Coming soon

1

Apply a z-index value
1:49
Apply a z-index value
Coming soon

1

Hide overflowing content
1:49
Hide overflowing content
Coming soon

1

Fixed positioning
1:27
Fixed positioning
Coming soon

Progress

0%

Details

Intermediate - Advanced
1h 34m
15
Lessons

Assets & links

Continue learning