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

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

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

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