Fluid layout! Best practices

I am looking for some good sources/tutorials for a fluid layout that serves, both, desktop and mobile devices. For desktop I would use a percentage based layout in combination with max- and min-width e.a.

#wrapper {
	width: 70%;
	max-width: 1200px;
	min-width: 780px;
	margin: 0 auto;

But that isn’t really an option for mobile devices? This site for example shows very good both on desktop and mobile devices. I have been going over their stylesheet, (which is I think one of those template stylesheet) but couldn’t find anything out of the ordinary except that they don’t use the min-with property. Would that be a way of doing this or should I have a separate stylesheet for mobile devices? Any advice would be highly appreciated.

Thank you in advance.

You should find something you need here or [URL=“http://www.hongkiat.com/blog/responsive-web-tutorials/”]here or [URL=“http://responsivedesignweekly.com/rwd-summit/responsive-layouts-with-zoe-gillenwater/”]here.

The basis of a fully fluid site involve using media queries to change the layout when it no longer fits the viewport. There are many strategies but a common theme would be mobile first and then expand for more capable devices. It is not just a case of adding a simple rules set to the body tag but a whole [URL=“http://mobile.smashingmagazine.com/2012/10/24/beyond-common-media-query-breakpoints/”]design concept from the ground up.

This site for example shows very good both on desktop and mobile devices

I didn’t see anything special there apart form a media query to scale up for larger viewports. The iphone emulator shows the site just shrunk to fit with no special rules that I could see (I assume the actual iphone would be the same but have;t got one to hand to test). If the site is 960px wide then it gets scaled to fit the iphone better but a better approach would be a change of layout for small devices and not just a shrunk layout with unreadable text.

Hi Paul. Thank you for your reaction, links and tips. All very helpful. There is one other thing I can’t get my head arround and that is the height property in a fluid design. I know that for pictures I could use the max-width: 100% rule, but what about normal divs? I can set a width yes how do I set a height in such a way that aspect ratio will stay in place?

Thank you in advance.

Yes, same on the real thing.

It will scale automatically. Don’t set heights in general. Let elements find their own natural height.

Hi Ralph. Thanks fot the reaction. I understand that part, but what if I have four divs in a row, having a different amount of text, all having a different background color but I want to have them all the same height

You have to separate “what you want” from “what is good for the content”. Instead of imposing a design on the content is should to some degree be the content dictating the design :slight_smile:

However, these days you can use display: table and display table-cell properties (for IE8+) to have equal height boxes without the need for specifying a height. For smaller devices you can change the element (via media queries) back to display:block or float.