From the course: CSS Layouts: From Float to Flexbox and Grid
Unlock the full course today
Join today to access over 24,900 courses taught by industry experts.
Exercise: Build a layout with float - CSS Tutorial
From the course: CSS Layouts: From Float to Flexbox and Grid
Exercise: Build a layout with float
- [Instructor] We'll first take a look at the HTML markup to decide which elements to apply the CSS styles to. We have a header nav tag at the top, followed by a main tag for the main page content. There is also an aside tag used for related sidebar content and the footer to close out the page. All of these components are contained within a div with a class of "container". For this exercise, we'll start by setting the width for the entire page layout. We'll do this by adding the style to the container element. Let's switch over to the float.css file. Using the existing container block down in line 21, we'll add the width property. I'll set this value to 1200 pixels and end it with a semicolon. I'll also add margin and set it to zero for the top and bottom and auto for the left and right. This will center align it horizontally. Let's save the file and switch over to the browser. Refresh the browser to see the changes. The…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
- (Locked) Inline and block elements1m 53s
- (Locked) The box model properties3m 32s
- (Locked) The display property5m
- (Locked) The box model and layouts3m 17s
- (Locked) The float property3m 19s
- (Locked) Clearing floats5m 32s
- (Locked) Setting up your project2m 45s
- (Locked) Exercise: Build a layout with float6m 29s
- (Locked) Position: Relative and absolute5m 15s
- (Locked) Position: Fixed, sticky, and static4m 13s
- (Locked)
-
-
-