Chapter 3

Sizing and Positioning Page Elements


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.


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 live online training, plus books, videos, and digital content from nearly 200 publishers.