Chapter 3

Sizing and Positioning Page Elements

IN THIS CHAPTER

check Wrapping your head around the CSS box model

check Setting the sizes of page elements

check Encrusting elements with padding, borders, and margins

check Letting elements float where they may

check Positioning elements exactly where you want them

Every element in web design is a rectangular box. This was my ah-ha moment that helped me really start to understand CSS-based web design and accomplish the layouts I wanted to accomplish.

— CHRIS COYIER

I’m not going to lie to you: When you’re just getting started with CSS, the elements on the page will sometimes seem to defy your every command. Like surly teenagers, they ignore your best advice and refuse to understand that you are — or you are supposed to be — the boss of them. Okay, I did lie to you a little: That can happen to even the most experienced web coders. Why the attitude? Because although web browsers are fine pieces of software for getting around the web, by default they’re not very ...

Get Web Coding & Development All-in-One For Dummies now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.