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.
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?)
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.
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.
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…
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.
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?
@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.
Beautifull!
Great work, thanks Chris.
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
Hi, good example and I agree CodeAssembly.
@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”?
@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
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.
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.
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
@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.
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
@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.
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?
@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.
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.
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?
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.
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.
Do you have a 3 column layout also for this design, what should be the sidebar size ideally.
thanks
http://itdiscover.com
@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.
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.
I would suggest to change min-width to 775px for Firefox users.
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!
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
@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?
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.
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.
@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.
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?
Sorry, should have also mentioned that to complicate matters, we need to keep the left sidebar fixed width.
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?
@Bert: Sorry about those validation errors.. fixed up the example and download.
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?
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.
That’s what I suspected, but being a CSS newbie, I thought I would ask. Thanks for the explanation and the workaround.
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?
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
wow, sorry for the spelling, haven’t had my morning coffee …
=)
@nitinpai: Just as a sidenote: “Garland” is the drupal theme that was ported to WP.
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
@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?
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:
Here in my .css file I have this for my container:
Rick
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
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.
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.
Wonderful and WORKING example of the fluid layout.. Thanks..
I would suggest to change min-width to 775px for Firefox users.
Good job! I’ve been admiring a website and I finally realtized that they have a unique way of doing their fluid style. Go to http://www.HuffingtonPost.com, and notice how the screen adjusts all of it’s columns when you land. I’ve not seen this accomplished anywhere else. I WANT it.!
hello sir,
how can i resize the fonts and images according to the page size, when page width gets shrinked?
The simplest answer, Anto, is media queries (utilizing ‘min-width’ and ‘max-width’). There are loads of articles here on css-tricks on that. I hope that helps.
Totally agree on that Ed, the page should also be liquid horizontally. Hope you can fix this Chris :-)
Chris, I know this is an older post. I love the layout, but have one question if you (or anyone else)could clarify.
body {overflow-x: hidden;
}
causes the content on the right to be cut off on smaller resolutions. How does this benefit you in the design and what reasoning is it set like this for the responsive design?
Thanks