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, obviously to make the content easier to view.

ex: http://simplebits.com/

My question is.. what css is being used to make this happen (if it is css, perhaps JavaScript..)? what should I look at in order to learn more about this technique?

Thanks!

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

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

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