Try resizing your browser window...
This should be visible if your window is more than 1100px wide
This should be visible if your window is less than 900px wide
Media Queries
Over the past couple of years, we have seen browser platforms become much more diverse. Smart phones with HTML capability are ubiquitous; Blackberries and PDAs are common; widescreen monitors are all over the place. In the past, we could almost always rely on our users having one of three or four screen resolutions - but nowadays they could be using any of twenty different sizes.
This has a distinct impact on our standard webpage widths, to pick the most obvious consequence. CSS3 allows us to dynamically address this issue and others via media queries, which apply styling based on various capabilities of the display device.
These capabilities include min- and max- width, min- and max- height, color, and colour depth (expressed similarly to dimensions: min-color:4, where the value is the colour bit-depth). Here's a full list of the possibilities supported by Firefox 3.5 (for example).
Note that these declarations can be used in two ways - as modifiers which apply to a whole stylesheet:
<link rel="stylesheet" href="css/narrow_screens.css" media="screen and (max-width:50em)">
...or embedded within a given stylesheet to affect a given set of declarations, as I've done below. This second variant means you end up with nested curly braces in your CSS file.
Adding even more complexity: you can use the keywords and, not or only in combination to narrow down the application of your CSS - screen and (not color) would target only monochrome screens, for instance.