Light mode Switch to Dark mode High contrast

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.

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

1h 34m

15

Lessons

Assets & links

Assessment

Test your knowledge

Enroll Now →

Continue Learning

<h3>Intro to Optimize</h3>Learn how to use Webflow Optimize to improve your site's conversion rate using testing, personalization, and AI Optimize.

<h3>Webflow 101</h3>Introducing Webflow 101, the ultimate course to learn the fundamentals of web design and development.

<h3>Prepare to publish your site</h3>Learn how publishing works in Webflow, manage site changes with confidence, and prepare for launch.

<h3>Webflow SEO fundamentals</h3>Learn how to plan, build, and maintain a search-friendly Webflow site using best practices and built-in SEO tools.

<h3>Take your app live with Webflow Cloud</h3>Prepare and deploy an existing app, connect live data, and keep it running.

<h3>Collaborate with your team</h3>Learn how to set up roles, permissions, and workflows in Webflow so your entire team can work together safely, confidently, and efficiently.

{
  "@context": "https://schema.org",
  "@type": "Course",
  "name": "CSS layout & positioning",
  "description": "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.",
  "url": "https://university.webflow.com/courses/css-layout-and-positioning",
  "inLanguage": "en",
  "provider": {
    "@type": "Organization",
    "name": "Webflow University",
    "sameAs": "https://university.webflow.com"
  }
}