CSS: hide column when decreasing width

Question

Check out: http://thinkvitamin.com/

When you reduce the size of the browser at some point, the right column simply disappears. A pretty nice slide, and this creates a pretty flexible design. However, I do not see any special CSS. Is this Javascript, or can it be achieved only with CSS?

Answer 1

This is done using pure CSS, namely with CSS3 Media Queries.

Specification: http://www.w3.org/TR/css3-mediaqueries/

Tutorial: http://webdesignerwall.com/tutorials/css3-media-queries

Browser Support: http://caniuse.com/css-mediaqueries (works "everywhere" except IE8 and below)

Answer 2

The reason the sections on the right disappear is because they have this on their css:

width: 24%; float: right; 

if the width is set to a fixed width, sections will be omitted to the bottom of the article.