The Perfect Fluid Width Layout
I’ve been thinking a lot about screen resolution lately and how the use of fluid width websites is the best way to accommodate all visitors screen resolutions. The alternative, static width websites, have to make a choice. You can optimize for 800px width, the lowest common denominator, and give up the use of several hundred pixels of width for users with larger screens. Or, you can optimize for 1024px and just make your 800px visitors horizontal scroll. Anything wider than 1024px is too much for static width sites, in my opinion.
I think the best possible scenario is to make a fluid width site that accomodates everyone. Here is what I think would be the “Perfect” fluid width layout:
- Works in all major browsers
- Shrinks to 780px
This accomodates users with 800×600 resolution, with no horizontal scroll! - Grows to 1260px
This accomodates users with 1280×768 resolution and everything in between. - This accommodates 90%+ of all internet users. You could easily make this layout grow larger, but be mindful of how line-length affects readability. Nobody wants to read a line of text 1980px long.
- Sidebars are of “equal height” to the main content
- Page content is centered for users with even higher resolutions.
I set to work and wouldn’t ya know it, I think I got it =)
I’m fairly nervous calling it “Perfect”, because I’m sure some geniuses out there are going to poke some holes in it and call me out on a few things. That’s fine, I hope that happens because I’m up to the task of making sure it’s up to par and the best it can be. I’ve tested it in Firefox, Safari, Opera, and Internet Explorer 6 and it works in all those, so I’m just going to cross my fingers and post this. As usual, feel free to download and do with what you please. Links are always awesome.
Loading ...
1
I like it!
and will probably even use it in the near future..
The only issue I can see from looking at it, is that the left sidebar is listed first. If this included as a menu or for other stuff (blog info, adverts etc) I would probably suggest putting the content div first for screenreaders, people not using css etc.
Also it works fine in IE7.
(btw have you touched up the design on your website?)
Comment by Jermayn Parker — October 11, 2007 @ 7:35 pm
2
That is an excellent point, the sidebar really should be listed last in the HTML. Since it’s just two main sections and they are both float-left float-right, switching them around would be easy and probably not affect anything.
Yeah I moved a few things around. I got to thinking the double sidebar thing was just too much, so I moved some stuff to the footer. You can find categories, archives, and my mini-bio down there now.
Comment by Chris Coyier — October 11, 2007 @ 8:25 pm
3
I think you would be much better of having it shrink to 775px as (at least for me) 780px causes mini scroll bars in Firefox 2.0.0.7 without any customised toolbars etc.
Whenever I design for 800 x 600 I make my sites 775px.
Comment by flash — October 14, 2007 @ 12:01 am
4
Excellent!
You should write up a short description of how it works and where the min-width/max-width/expression() CSS work and don’t work…
Comment by Wesley Tanaka — October 14, 2007 @ 7:23 am
5
To be frank, this is a very minimalist design which can be made to remain fluid in any situation which is ok unless you want better appealing designs. I have made the same in the past but when you start bringing in more number of blocks the fluidity tends to degrade and it become more and more complex to maintain it in its fluid state.
Thats why I would insists instead of remaining fluid, be fixed to a certain resolution. I would like to cater to the 1024 x 768 resolution and keep my layout fixed since I know that majority of techie people will have it and now that its becoming a default.
I dont mind it not being fluid on higher resolutions since anyway making it fluid would destroy its beauty if blocks start to get expanded on higher resolutions.
Comment by nitinpai — October 14, 2007 @ 7:37 am
6
Hi Chris (and the others who advocate ~800px minimum width folks), just want to point out that many users are using (and not willing to give up) side bar(s) in their browser, they too have the right not to be forced to scroll horizontally, so the minimum width (if it ever should to be set) got to be much less than 800px. Agree?
Comment by Jerry — October 14, 2007 @ 8:06 am
7
@flash: That’s part of the beauty of this example, just change two simple numbers in the CSS and it will shrink right down to 775. 780 was just a random choice I made thinking 20px would be enough to compensate for the vertical scroll bar, but I’ll use 775 from now on, thanks for pointing that out.
@Wesley Tanaka: Good idea, I think I’ll write more on that subject soon. The short answer is, min-width max-width work in most “good” browsers and the expression stuff is what makes IE 6 and below work.
@nitinpal: I know what you mean, as you can see on this site, I have opted to keep a fixed with site optimized for 1024px in width (the main content is actually only 980px to compensate for the vertical scroll bar, etc). It is true the design is fairly minimal, but I think you could still create appealing designs with that template. Do you have a specific example of something you might want to add to the layout that would break it’s fluidity?
@Jerry: That’s sort of what flash mentioned above. This layout is very flexible that way. If you wanted to make is shrink all the way down to 500px in width (for example), you could do that very easily by just changing a few numbers in the CSS.
Comment by Chris Coyier — October 14, 2007 @ 9:14 am
8
Beautifull!
Great work, thanks Chris.
Comment by Matt — October 14, 2007 @ 4:15 pm
9
I think that is better to keep all your style in your css file and don’t use inline style, this makes the source bigger and is ugly.
Cheers
Comment by CodeAssembly — October 14, 2007 @ 11:28 pm
10
Hi, good example and I agree CodeAssembly.
Comment by Volkan Görgülü — October 15, 2007 @ 1:58 am
11
@CodeAssembly & Volkan: Yep, I agree CSS belongs in it’s own file if nothing else for code beauty. This example doesn’t use any inline styles… Were you just saying “in general”?
Comment by Chris Coyier — October 15, 2007 @ 6:09 am
12
@Chris
CodeAssembly was referring to the inline styles you have for clearing your floated elements. I’m sure a global clear class will do the trick:
http://www.positioniseverything.net/easyclearing.html
Comment by Javier Julio — October 15, 2007 @ 7:05 am
13
Feel free to cry foul, but I think using the simple inline style float clearing is superior. I’d rather add a little bit of extra markup to avoid muddying my CSS with (count ‘em) four hacks to get the same solution.
Comment by Chris Coyier — October 15, 2007 @ 7:25 am
14
Hi Chris,
I was referring to the famous 3 column theme in wordpress called “Garland”. Can you make such a 3 column theme fluid because I found 3 column themes to be the most difficult to keep fluid.
Comment by nitinpai — October 15, 2007 @ 8:19 am
15
Great job. When designing a site, I’m not just thinking for the desktop, but also for mobile devices. If you view your sample fluid layout on an iPhone, for example, you get horizontal scroll bars in any mode.
Do you think that modifying the min. width to that of most mobile screens will eliminate the horizontal scroll bars?
Thanks
Comment by planner — October 15, 2007 @ 2:25 pm
16
@nitinpai: I believe it is possible to get another column in there without hurting it’s fluidness. I was able to toss a right-floated column into the main layout, which you can view here. I just did it quick, so the right column isn’t of equal height, but you could pull it off and even give it a background probably with a bit of a “sliding doors” technique.
@planner: You could absolutely just modify the minimum width to get the design to shrink. In the case of this layout, the left sidebar background is created with an image, which is of course a fixed-width in this case of almost 200px. That is going to be too big for mobile devices so that would need to be altered. And of course the image I used in the header would have to be removed in place of more mobile-friendly text.
Comment by Chris Coyier — October 15, 2007 @ 3:34 pm
17
Hi,
Good article, we seem to to be at the turning point of designing sites to accomodate 1024px resolutions rather than 800px… though we want our sites to be accessible as possible but also look their best (too much wasted space at ~775px IMO). A fluid approach like the example above is probably the best way to overcome this issue.
I’ve seen some nicely designed (non limited) fluid sites though which look nasty on my monitor (1600×1200 display) so I think having a site that shrinks to 775px and expands to ~999px would be the best option for us.. A great example i’ve seen recently is the new John Lewis site, http://www.johnlewis.com
Thanks
Comment by Tom — October 17, 2007 @ 3:30 am
18
@Tom: Wow, that John Lewis site you linked to is a top notch example of fluid width. There is some sliding doors action going on. I really like how most element even keep a healthy amount of whitespace padding to keep them very readable. The only strike is the menu, gets a bit tight when you shrink the browser window. All in all pretty amazing work though.
Comment by Chris Coyier — October 17, 2007 @ 10:13 am
19
Very nice, I love the simplicity of the whole thing. What exactly would I need to change so that I can place the Sidebar div underneath the main content div in the html?
Comment by Dank — October 17, 2007 @ 5:28 pm
20
@Dank: Thanks! I was able to alter things a bit in order to get that sidebar div underneath the main content div, as well as add a right sidebar. You can check out the example here.
Comment by Chris Coyier — October 17, 2007 @ 5:54 pm
21
There are some caveats to using Expressions, one of which is that the expressions are evaulated numerous times, even moving your mouse could trigger it, so they can easily slow down a site. Yahoo Developer recommends against using CSS Expressions, as do others. I’ll stick with a straight JS solution to min/max width.
Comment by Diane — November 5, 2007 @ 9:17 am
22
Javascript probably is a more effective way to handle this, but what about visitors browsing with javascript turned off? Do you have it degrade nicely to a fixed width?
Comment by Chris Coyier — November 5, 2007 @ 3:55 pm
23
I personally do not agree with using a JavaScript method, from what I know of JavaScript it will only enlarge the file/ upload size were a min & max CSS line of code will be very minimal.
Comment by Jermayn Parker — November 5, 2007 @ 5:48 pm
24
Only IE<=6 doesn’t understand min and max values so you’re better off putting your expression in an IE-only stylesheet served up with conditional comments so that the only people who suffer any performance slowdown will be those using older browsers.
As for max-width, better to use ems as a value so that the layout can increase in size proportionally when people resize the text in their browsers.
Comment by John Faulds — November 14, 2007 @ 6:07 am
25
Do you have a 3 column layout also for this design, what should be the sidebar size ideally.
thanks
http://itdiscover.com
Comment by Web Dev Tools — November 14, 2007 @ 2:19 pm
26
@John: Good point, that would be a good way to isolate IE 6. I hope to do a tutorial soon on using ems for page width. I see your site uses them very effectively, good work!
@Web Dev Tools: A while back, someone had a similar request to add another column. I was able to put a pseudo-sidebar on the right (example here). I didn’t do the best job of making it look great, but it’s certainly possible. I think I might work up another tutorial on using a sliding doors kind of thing to more effectively do a 3 column fluid width side with equal height columns.
Comment by Chris Coyier — November 14, 2007 @ 8:12 pm
27
hi chris, thanks for your supportive article. i really being a fan of u. can u please post one articel with how to handle css xhtml layout carefully. i mean with everything like width, float, ul li etc.
thanks anyway.
Comment by PraP — December 12, 2007 @ 11:24 am
28
I would suggest to change min-width to 775px for Firefox users.
Comment by Acronyms — March 3, 2008 @ 6:16 am
29
Thanks for this demonstration. I have been trying to figure out a fluid layout - and this answered alot of my questions. I am off to try it!
Comment by Dorothy — March 3, 2008 @ 5:51 pm
30
I tried this - it seems to be working great on my computer, but a client that has a widescreen says that the background is not stretching to the full screen width and for some reason the image is not floating right. Everything looks great on my monitor. Could you see how it views on your (assuming you have a widescreen)
http://www.premiumwebsites.net/samples/sports/index.html
Temp link
Thanks
Dotty
Comment by Dorothy — March 4, 2008 @ 3:32 pm
31
@Dorothy: I took a look in most of the major good browsers and also IE 6. IE 6 has some of it’s regular quirks like an abnormally large font size and some weirdness in the menu but the background looks fine. Perhaps they mean that they “gray” background doesn’t stretch full screen?
Comment by Chris Coyier — March 5, 2008 @ 7:33 am
32
superb information mate.I have made my websites wordpress fully fluid width.It stretches according to the screen layout.
I am gonna use this soon to code my fluid width wordpress themes :)!!!
Regards,
Samir.
Comment by Samir — March 20, 2008 @ 1:55 pm
33
Great work!
I’m using this basic layout in a current project and noticed a problem if the sidebar is longer than the main content. The background does not cover it.
Do you have good solutions? All I can up with was to wrap the columns in another div, which sticks.
Comment by Matt — April 1, 2008 @ 6:58 am
34
@Matt: If you apply the background image from #main-content to #page-wrap instead, that will stretch the sidebar as large as you need it. That’ll make it peak through the header and footer in my particular layout, but that’s just because of the main padding which is work-around-able and may not even apply to your layout.
Comment by Chris Coyier — April 1, 2008 @ 7:58 am
35
Great stuff.
We’re struggling with a refinement though. Do you know how to prevent the expanding white space between the left bar and the main content area when the window grows horizontally?
Comment by Rob — April 24, 2008 @ 8:11 am
36
Sorry, should have also mentioned that to complicate matters, we need to keep the left sidebar fixed width.
Comment by Rob — April 24, 2008 @ 8:27 am
37
Nice layout. But …
the sample page does not pass the HTML and CSS validators on w3.org.
Can this be fixed without breaking the layout functionality?
Comment by Bert — June 22, 2008 @ 4:17 pm
38
@Bert: Sorry about those validation errors.. fixed up the example and download.
Comment by Chris Coyier — June 22, 2008 @ 6:03 pm
39
Chris, thanks for the quick response. the HTML now passes validation. However, the CSS validation of the live sample page still reports two errors related to the line with the CSS expression. Can that be fixed?
Comment by Bert — June 22, 2008 @ 7:17 pm
40
No it can’t…that’s what makes IE 6 and lower respect the min-width and max-width. You can, however, toss that into a conditional stylesheet which will allow the main page to pass CSS validation if that’s super important.
Comment by Chris Coyier — June 22, 2008 @ 7:23 pm
41
That’s what I suspected, but being a CSS newbie, I thought I would ask. Thanks for the explanation and the workaround.
Comment by Bert — June 22, 2008 @ 8:01 pm
42
One other question regarding search engine optimization. I read somewhere that you get better indexing by the search engine if the main content div is near the top of the markup (before the header and the main and secondary navigation). How difficult would it be to change your layout to follow this pattern?
Comment by Bert — June 22, 2008 @ 8:15 pm
43
bert i dont knwo fi Im too late i just saw this post
just send the expression through conditional comments and all will be dandy
pab
Comment by pab — June 29, 2008 @ 10:17 am
44
wow, sorry for the spelling, haven’t had my morning coffee …
=)
Comment by pab — June 29, 2008 @ 10:18 am
45
@nitinpai: Just as a sidenote: “Garland” is the drupal theme that was ported to WP.
Comment by Sebastian — July 23, 2008 @ 11:28 am
46
Hi,
I am using the following expression:
width:expression(document.body.clientWidth < 782? “780px” : document.body.clientWidth > 1262? “1260px” : “auto”);
for my website.
This works well in Firefox, but in IE6 it is giving me ActiveX warnings. When I allow the ActiveX option in IE6 and try to resize my browser, my browser window starts to freeze and I have to end the IE browser task through my Task Manager
Is their anyway around this situation?
rick
Comment by Richard Ambrosino — August 27, 2008 @ 8:18 am
47
@Richard: Is that exactly the line of code you are using? I know if the two numbers are the same (e.g. they both were 780, not 782 and 780), then it DEFINITELY will freeze your browser. Not sure in your case though. Does the example page also crash your browser?
Comment by Chris Coyier — August 27, 2008 @ 8:22 am
48
Hi,
Thanks for the reply. No, the example page does not crash in IE6. In my design when a resize the window to that 780/782 mark that is when the window starts to freeze (e.g. in IE6). Basically, I have a website that I have designed with combination of tables and css and div code, however, the design is fixed/static and when I look at it in a resolution of 800 x 600, it is “scroll” city. I am looking to make my website design “fluid”, and I found out very quickly that I could not serve two masters, namely using a table design and a css/div design especially when dealing with “percentages”, the float concepts and the problems associated with “wrapping”. Therefore I am looking into tableless design, and your example seems to fit into what I am looking for.
Here is my basic design layout:
<div id="topright"></div>
<!– End of container
Here in my .css file I have this for my container:
container {
min-width: 780px;
max-width: 1260px;
margin: 10px auto;
width:expression(document.body.clientWidth < 782? “780px” : document.body.clientWidth > 1262? “1260px” : “auto”);
background: #ffffe0;
color:#0000ff;
border: 2px solid #0000ff;
}
Rick
Comment by Richard Ambrosino — August 27, 2008 @ 10:35 am
49
Chris,
Hi, I think I solve my problem, just changed:
width:expression(document.body.clientWidth < 782? “780px” : document.body.clientWidth > 1262? “1260px” : “auto”);
to this:
width:expression(document.body.clientWidth < 782px? “780px” : document.body.clientWidth > 1262px? “1260px” : “auto”);
As a follow up question, I was reading some of the comments on this page, some of the comments suggested that the “font-size” should be change from pixels (px) to em. Would use suggest I do that?
If that is the case, off hand, do you know about how many pixels are to an em (that is roughly)?
Rick
Comment by Richard Ambrosino — August 27, 2008 @ 1:32 pm
50
Nice demo. I agree with you about having fluid width for different screen resolutions. I tried moving the sidebar after the content in the HTML but it doesn’t seem to work that way. Don’t know if there is any solution for that.
Comment by follow — September 17, 2008 @ 3:14 am
51
Very nice ,i like it.i have studied alot from css.tricks.com.
css.tricks.com it’s what i am looking for:tips,skill,professional,….
Thanks Chris .
I am from Cambodia.
Comment by sarak — October 5, 2008 @ 9:41 pm