Alex
Alex

Reputation: 1322

Fluid layouts with CSS

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!

Upvotes: 6

Views: 2381

Answers (4)

Stephan Muller
Stephan Muller

Reputation: 27640

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

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

Upvotes: 1

detaylor
detaylor

Reputation: 7280

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

Upvotes: 8

Jim
Jim

Reputation: 73966

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.

Upvotes: 5

RoToRa
RoToRa

Reputation: 38441

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

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

Upvotes: 5

Related Questions