/CSS/ Flexible fixed layouts
02/03/2007 | Filed under Develop > CSS
Changes in screen size can be a nightmare for web developers, but it doesn’t have to be this way. Craig Grannell reveals the art of creating fixed layouts for multiple screen sizes
Technology, as ever, marches on, and the current situation for web developers is another big screen-size changeover. Those of you who’ve been in the game for a while now will recall the headaches caused by the gradual shift from 640x480 to 800x600, with many sites leaving it until the last possible moment to resize. The same sort of thing’s happening today, with 1,024x768 now the dominant screen resolution, but with 800x600 clinging on by its fingernails, and still accounting for anything up to a fifth of users.
In this month’s tutorial, we’re going to show you one method for creating a layout that works well at both of the most popular screen sizes, despite the design being a fixed width. It results in a flexible design that’s suitable for many applications, including corporate sites, portfolios and blogs. Essentially, careful use of ‘height’ attributes and floated divs creates a web page with a fixed main content area and two columns of navigation links at the right-hand side. If the browser window width drops too much below 1,024 pixels, the navigation columns reposition themselves in a linear fashion, one beneath the other.
Click here to download the support files.
Click here to download the tutorial PDF. 
Comments
J. ter Horst / 03/03/2007 / 10:47 / http://www.cmssolutions.nl
Thanx for the great tutorial. Screen resolution is a interesting situation as you describe for designers. And most of the time I see designers come up with one of the next solutions:
1 - Stay within the margins of a 800x600 resolution
2 - Drop 800x600 support
But as you describe in this post there are ways to design a site that don't leave you with a choice but with a solution.
Geoff / 04/03/2007 / 19:32 / http://www.crazypixel.co.uk
Good article.
Paal / 05/03/2007 / 17:51
I always do 1 outa 2; 800x600 or floating width. Even though I work on a large monitor, I find 1024 or wider fixed pages a bit anoying. Cause users width large monitors are use to the great benifit of a large monitor, namely the fact that you do not have to full-screen but rather tile your apps around the screen.
nice solution though ;)
Keith Donegan / 08/03/2007 / 18:44 / http://www.code-sucks.com
Great Article Craig...
Edwin Bollen / 15/03/2007 / 11:43 / http:/www.vincire.nl
This is a very nice tutorial and i will study it some more.
But I am curious. Haven't we put the changeover from 800x600 to 1024x768 behind us? My experience is that less than 5% is still using 800x600 and this number is shrinking. Schouldn't we look to the future and the growing number of large and wide screen monitors that is growing rapidly.
So lets focus on the changeover from 1024 to 1280, 1440 or even higher. Floating designs can overcome this for the larger part.
Keep producing great articles like this one.
Gate / 17/03/2007 / 20:30
text unreadable
the advertisement is in the way.
for a tutorial on website design, how could we take it serioulsy if the site that is displaying it isn't built correctly?
Steven Mc / 17/03/2007 / 22:36
I think the real point is that in this Web 2.0 era, we should concentrate on content that matches any display, whether that be a wide-screen hi-def web-TV or a mobile phone. CSS has the ability to acomplish that, and this article helps us to take care of half that equasion (or at least, some of the middle ground).
Liz / 21/03/2007 / 20:11
wow, i would love to read this tutorial, however, there is no way to increase the font size. On my screen it is teeny weeny. How ironic that this is an article about this very problem. At least I think it is, I can't really read it.
David Guy / 27/03/2007 / 21:21
I've searched the CD on issue 161, 160 and 162 but can't find any trace of a folder called 'flexible-layout’ or indeed a file called ‘flexiblelayout. html’
I give in.... where did you hide them?
I know all the info is on the flexible-fixed-layouts page on the site, but.....
Abu / 01/04/2007 / 04:04 / http://www.tm4b.com/
Develop websites according to your target audience.
Give primary importance to the most common resolution (which will be visible to super-high resolution viewers) and degrade gracefully to smaller resolution users.
Craig Grannell / 09/04/2007 / 16:52 / http://www.snubcommunications.com
David—I've no idea about what goes on the CD. However, if the files aren't there, email me via my website. According to my records, this tutorial was originally printed in .net 158, if that helps.
Laura Linuxweiny / 20/04/2007 / 12:29
As an aspiring designer, I find it amusing to note that those who CHOOSE to use a browser which is determinedly NOT standards compliant while there are several which ARE standards compliant, FREE I might add, would take the time to complain about how unreadable web sites are, content notwithstanding.
Did I mention that foxfire rocks the free world?
I will master liquid layout. I hate images. I will master liquid layout.
chris clinton / 28/04/2007 / 08:43 / http://www.promechanics.com
Awesome article. I have been looking for a way to expand our site to meet the needs of multiple browser sizes.
Question: is there a way to modify this a bit so that the third column appears along the bottom of the screen horizontally rather than vertically, like that on klm.com or uxmag.com?
Nebog / 29/04/2007 / 14:13 / http://www.nebog.com
thanks for tutorial.
Maldee / 01/05/2007 / 02:13 / http://maldeetuh.org/
Craig
I will be reffering your great tutorial to some of my english speaking frends in Poland.
thank's,
Maldee
Craig Grannell / 03/05/2007 / 17:26
"is there a way to modify this a bit so that the third column appears along the bottom of the screen horizontally rather than vertically, like that on klm.com or uxmag.com?"
Not directly from the tutorial files, although you could always feed certain CSS rules via JavaScript, depending on the browser window size (assigning the third column to clear floated content if the window was too narrow).
Craig / 08/05/2007 / 12:49
"it only works in Firefox"
Works fine here in Firefox, Safari and IE 7/6.
Dunikowski / 13/05/2007 / 12:18 / http://www.splendid-gowns.com
Thank you for this excellent tutorial.
Alice B. / 17/05/2007 / 12:09 / http://www.euro-truck.biz
Great for excellent tutorial Craig.
Inside-Marketing / 06/07/2007 / 19:52 / http://www.Inside-Marketing.net
Real good article it get into the main problem about design a website. the "holy"-question is to make it liquid or just static. at time we produce our customer-sites with the main-content fitting into 800x600 pix and with an outgoing design to 1024x768 (height allways 100% or flex). but we have reasearched that there are many resolutions that are not standard (for example 2-monitor-installations) or some weird resolutions that allways breaks the design. The Article gave some good hints.
Frank / 10/08/2007 / 18:29 / http://www.inkmaestro.ie
Hi there,
My first post just got lost! I was just saying that your article is very informative, great bed-time reading!
Cheers,
F
Dave / 24/10/2007 / 01:32 / http://www.dita-xml.org
Thanks for the article but the downloadable PDF files are a great bonus. I hate having to print screen shots from webpages for future reference. The PDFs are great.
jack / 09/01/2008 / 04:40 / http://www.wige.pl
Is there any possibility to download all yours pdfs?
Joe / 27/03/2008 / 00:47 / http://www.ambitenergyohio.com
I am new to this blog and I came across this post. Wow!! What a great tutorial. And thanks for the down loads. Are there any other you are giving away? I do not want to seem greedy though this is awesome stuff.
So very often most site share cool ideas though they do not actually teach you how to do it.
Your stuff is great!! Thanks again!!
Clare / 15/06/2008 / 16:01 / http://open-source.optionextreme.net/
Now, i've dowloaded the support files, and will try it.
I think, it's a good idea, because the visitors monitor are everytime a problem.
Thank you!
