Lesson 7: Basic CSS Layout


Click for closed captioning

Next Step

Step 2: CSS Layout In Action


Click for closed captioning

In principle, CSS layout is simple. You set the size of box elements and tell them where to be.

In practice, things are a little more complicated. That's because you have options in the measurement units you choose and in how you position the box elements.

In the video above, you'll see how to create a fixed-width layout. You can download the HTML page used in the demonstration and follow along with Komodo Edit.

Layout Resources


You'll be able to create a page architecture with CSS layout properties.

The class CSS Google Doc has been updated with the specific properties discussed in this lesson.

If you'd like to see another example of how to build a fixed-width layout, you can find two-column and three-column tutorials by Steven Bradley.

The advantage of fixed-width layouts is that you can control how the page should look to the pixel. The disadvantage is that it's not as flexible across devices, and what looks good on a 24-inch desktop computer may not look so great on a 4-inch smartphone screen.

In Lesson 8, we'll talk about how to build fluid layouts and responsive design that flatters different screen sizes.

Next Step

Log in to Moodle to complete Assignment 7.