There are left and right sidebars in many layouts. Sometimes they look strange when they’re different heights. Learn how to make them the same height.

Learn the difference between inline and block tags.

Learn:

• To create a new layout, adapt something that already works.

• Be careful when combining pieces to make a CSS selector. Commas and spaces are different.

Learn that:

• Floating an element takes it out of normal flow.
• Floated elements move left or right. Other elements wrap around them.
• The clear property lets you control whether things are allowed to float to the left or right of an element.
• By default, floated elements take just enough space to show them.

Errors in CSS can be hard to spot. There are tools that can help.

• An editor like Netbeans can check your typing.

• W3C’s CSS validator can check your CSS.

• Firebug and Web Developer are Firefox add-ons that let you inspect things on a page.

• MeasureIt is a Firefox add-on that helps you figure out exactly how things are positioned.

Learn:

• What the box model is, and how to use it.

• How to set margin and padding defaults.

• How CSS overrides work.

• How containership affects layout.

Learn:

• A page with a fixed layout maintains its width as the browser window changes size.

• Creating a fixed layout requires just a small change in a liquid layout’s CSS.

Learn:

• That a Web page with a liquid layout changes its width when the browser window changes its width.

• How to create liquid layouts with and without whitespace.

Learn that:

• Web page regions are visual areas on a Web page, like top, left, and center.

• Regions have common uses. For example, left regions are often used for nav bars.

This chapter is about how you group those elements together, to create page layouts.

Good layouts help users.

• Layouts group similar elements, like nav buttons. This helps people quickly find what they’re looking for.

• When the same layout is used across a site, people can predict where things will be. When a user looks at a new page for the first time, s/he knows where the “Add comment” link is.

Layouts also help site owners.

• Layouts draw attention to things site owners want users to know about, like today’s special deals.

• Layouts help with branding. For example, layouts help you put logos in the right place.