From the course: CSS Layouts: From Float to Flexbox and Grid

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

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

Start my 1-month free trial

Exercise: Build a layout with float

“

- [Instructor] In the last lesson, I talked about the HTML structure, and why I chose to put the nav element after the main content, which was for accessibility reasons. But I've also mentioned that there are limitations, especially when using floats for layout. If we had just two columns, we could float this one on the left and this one on the right, but we need to create three columns with the main content box appearing to be in the middle, when it actually comes before the nav in the HTML. Long story short, there's no good way for re-ordering items with float-based layouts without additional hacks. So let's start by moving the navigation to go before the main content. In our text editor, let's go into the index.html file, and down on line 19, we're going to grab this whole nav, and delete it from this area. Delete then copy, and put it right before the main content. We can also add in this skip navigation link.…

Contents