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

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…

Contents