Fluid layouts with CSS

Question

I have noticed on some sites that utilise a fluid layout, it is possible to remove elements on the page and replace elements when the window is shrunk to a smaller size, obv

Answer 1

The stylesheet contains different rules for when the screen is less than 800px wide. If you look at the stylesheet for the page the on line 983 there is a @media rule as follows:

@media screen and (max-width: 800px) {
  /* Alternate rules here*/
}

This is a CSS3 feature so I guess that the site does not restyle as nicely for older browsers. Details of media queries can be seen at http://www.w3.org/TR/css3-mediaqueries/#width

Answer 2

An interesting article about this technique (which is called responsive design, as Jim pointed out):

http://www.alistapart.com/articles/responsive-web-design/

Answer 3

This type of design is more commonly known as "responsive" design, whereas "fluid" design is usually referred to as design that isn't fixed width.

You can use CSS media queries to produce designs like this.

Answer 4

It uses CSS Media Queries. Look at the end of the CSS file:

http://simplebits.com/-/css/styles.css