From the course: CSS: Float-Based Page Layouts (2012)

Unlock the full course today

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

Applying the grid through CSS

Applying the grid through CSS - CSS Tutorial

From the course: CSS: Float-Based Page Layouts (2012)

Start my 1-month free trial

Applying the grid through CSS

“

Now that we've gotten the hard part out of the way--and trust me, the planning is definitely the hard part-- it's time to apply our grid to our layout using CSS. While we'll be using techniques like floats that we've already covered in previous chapters, we're going to see how our planning really pays off in making our CSS easier to write and how our typographic styles will tie in to our layout. So I've got the grid.htm file open here, and you can find that in the 05_04 directory. And there's just a couple of things that I need to do right off the bat. One is just sort of give you an overview of the structure of the page. If I scroll down past the styles here, you can see that we have a header, followed by a section with a class of col1. That has a lot of text in it. And as I mentioned before, this layout is very text focused. After that we have an aside with a class of col2, and at the very bottom we have a footer. So basic structure. And of course if I previewed the page in the…

Contents