/CSS/ Create a simple liquid layout

03/10/2006 | Filed under Develop > CSS

John Oxton explores how to make a simple but effective liquid layout, which will work across browsers and uses absolute positioning

Liquid layouts, which adjust as the user changes the browser window’s width, have as many advocates as fixed layouts. The real challenge is create a reliably coded layout you can depend on. The purpose of this issue’s tutorial is to produce a robust cross-browser liquid layout, using absolute positioning rather than the more commonly known technique of using floats. I won’t be covering design oriented layout skills in this tutorial, but will be providing a simple introduction to liquid layouts instead.

Usually, I mock up a layout in grey before I begin any kind of graphic design on it, so that I can see what’s going where and how much space I have to play with. This is a popular way of working, and a lot of designers produce a variety of mockups, or wireframes, to make sure they get the best possible results. On the whole, though, I would recommend letting your creativity run its course before coming back and working out the dimensions later.

The specifics

One of the common features of my own mock-ups, like the one on the opposite page, is that the footer div is nested inside the content div. This is because I want to use absolute positioning, and a footer div outside of the content or the secondary_content divs would simply stick to the top of the page. There are solutions to this problem, but they are too complicated for this project. The idea here is simply to introduce the idea of a liquid layout and my method is a simple way of doing this. If you really need that footer stretched across the bottom of the page, check out Shaun Inman’s superb Clearance method (www.shauninman.com/plete/2006
/05/clearance-position-inline-absolute).

Below is a sample of the HTML we’ll use to achieve the simple liquid layout. You should bear in mind that this is not set in stone. If you don’t think it’s suitable for your needs, feel free to tweak it, but remember one thing: a left sidebar could easily become a right sidebar one day so specifying position and colour is never a good idea.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/
html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>A simple liquid layout</title>
</head>
<body>
<div id=”head”>This is the head</div>
<div id=”content” >This is the content
<div id=”footer” This is the footer
</div>
</div>
<div id=”secondary_content”>This is the secondary content
</div>
</body>
</html>

Next, we’ll apply colours to the divs to tell them apart during the development phase. I have developed quite a habit of applying garish colours to my development work so that I can see exactly what’s going on where. Showing these development iterations to the designers I am working with (or indeed the client – if I know their sense of humour is intact) is a source of amusement…

#head{
background:blue;
}
#content{
background:green;
}
#footer{
background:brown;
}
#secondary_content{
background:yellow;
}

Of course I should mention that you should add the CSS to an external stylesheet, then using the link tag to apply it to the HTML:

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<link href=”pathto.css” rel=”stylesheet” type=”text/css”>
<title>A simple liquid layout</title>
</head>

Rounding up or down

You will note in the code below that although we have used percentages to define the div widths, a total of 100 per cent is never reached. In fact, because we will position this layout absolutely, we can probably round up the total to 100 per cent without any problems.

It is a well-documented fact, however, that the browser will sometimes round things up or down when it is calculating the percentages: if you are using a floated layout instead of this absolute model, you end up with widths of, say, 101 per cent, which could spell trouble because there is not enough space for the whole layout to fit. For this reason, I leave the middle margin blank.

#content{
background:green;
width:74%;
}
#footer{
background:brown;
}
#secondary_content{
background:yellow;
width:20%;
}

Now that the widths have been set, the footer has automatically inherited the width of its parent within the design – the content div – which saves us from any extra typing.

Liquid heaven Clagnut is a superb example of a well-executed, deceptively simple liquid layout. I strongly recommend a careful look through both Richard’s CSS files and his archives for little gems of knowledge.

Heights using ems

I am going to avoid all the usual historical discussion regarding the rights and wrongs of using em measurements, and get straight to the core of making use of them for web-based layouts. If we’re going to go to the trouble of making the widths flexible, it might be wise to specify heights in a way that they can also be resized. This is where ems come in handy.

I’ve never tried specifying heights with a percentage value – I just can’t see how that would work in practice – but ems can give you enough control to add precision heights with the added value of bungee-like behaviour. For this exercise, I only want to add a height to the header, so I can position everything below it.

#head{
background:blue;
height:5em;
}

5em might seem like a measurement pulled from nowhere, but it gives me a handy round number with which to explain what’s happening in the layout. The height I have just set is equivalent to 80px for nearly every modern browser with its font size set to default (medium in Internet Explorer). Every modern browser’s default font size is 16px, and so by default, 1em is equal to 16px. 16 x 5 =80, so I know 5em is equal to 80px. Just to clarify, if the browser’s default font size was 10px, say, 1em would be equal to 10px.

It gets quite complicated from there on, and we could spend a few pages talking about it – but that’s all we need to know for our exercise. I recommend you start with Richard Rutter’s post about ems for more in-depth information (www.clagnut.com/blog/348), followed by Patrick Griffiths’ primer on elastic design (www.alistapart.com/articles/elastic) if you really want to go for gold.

Positioning it all

Here, I’m going to go ahead and write the code to position everything at once, and then talk it through:

#content{
background:green;
width:74%;
position:absolute;
top:6em;
left:2%;
}
#secondary_content{
background:yellow;
width:20%;
position:absolute;
top:6em;
right:2%;
}

The basic layout is now essentially finished. Look at it in a browser, and you’ll notice that the 2% values added to the left and right positions have created margins, while the ‘center’ margin simply takes care of itself using whatever happens to be left of the original percentage. The first thing to try is resizing the text using the key combination Ctrl+‘+’ to make text larger and Ctrl+‘-’ to bring it back down again. (You could also select View >Text Size in Internet Explorer.) You will notice the header height is expanding to fit the content and the content and secondary_content divs are also moving to allow for that increased height.

To see the difference, try changing the header height to 80px and the top:6em on content and secondary_content to top:96px. When you resize the text now, the heights don’t budge. It’s up to you to decide if having the UI expand and contract in that way is beneficial: it’s not without its complications.

If you check this site in Internet Explorer and Firefox, you may have noticed some inconsistency in the positioning of the divs. The head div doesn’t have as much space between itself and the content and secondary_content divs. This is because the margin and padding on the body of the two browsers are not the same. To get consistency across all browsers, simply add:

body{
margin:0;
padding:0;
}

Finally, we come to the footer. There’s not a great deal to be done here at all, except to add a little padding to push the content away from its parent div.

#footer{
background:brown;
padding:0.5em;
}

Liquid done right What’s great about Vivabit is that you don’t even realise it’s a liquid design until you start to resize the browser.

As you might expect, this adds half of the default value as padding around the edge. In our example, the footer gets an eight-pixel pad all the way around.

So there you have it: a basic liquid layout. It’s no masterpiece of web design, agreed, but it may be the starting point for your own. From here, why not try adding some content, a navigation bar and some information in the footer and styling it all up? You might also drop in a background image across the head, and include a border or two to separate the different kinds of content. You’d be surprised at how quickly something so simple can start to look quite complex.

Of course, another good method for learning about liquid layouts is to study the code of the masters themselves. There are several tools available for saving a website to your local machine – or, of course, you can use Firefox in conjunction with the Web Developer Extension (chrispederick.com/work/webdeveloper) to study a site. It has been my experience that no one minds people accessing code for the purposes of education, but it is a bad idea to steal copyrighted code or design, even basic HTML. The web standards community tends to be watchful, and the owner will soon find out. Perhaps one of the most common gotchas is putting someone’s site on your web server – for study purposes – only to find yourself flooded with emails accusing you of theft. I thoroughly recommend that sites ‘stolen’ for study stay on your local machine.

Comments

Jason Spriggs / 04/10/2006 / 16:40 / http://www.spriggo.net

Jolly cool. Me likey this big time.

Andy / 07/10/2006 / 17:40

Just what i was looking for, how to create liquid layouts, thanks guys !

Graeme / 08/10/2006 / 20:46

Thank you and thank you again.

Excellent artic;le and explained a lot to me that some may take for granted as I'm only a novice.

Please keep up the good work.

Best wishes
Graeme

Sandra / 10/10/2006 / 12:59 / http://www.clonezip.com

It all makes sense.
I miss a few notes about resizing sites for mobile use (browsing from wireless devices). Your considerations about dimension units and percentages seem directly applicable to small screens, but I'll put test a few of them myself.
Thanks a lot.
Sandra

Ramon / 16/10/2006 / 05:53

Very nice! I've also recently discovered how easy liquid designs are if you use absolute positioning, when I redesigned one of my sites. It even works in broken browsers, such as Internet Explorer 5 and 6. I'll send a link to this guide to anyone I meet who still claims it's impossible/hard/inconvenient/incompatible.

Adam / 16/10/2006 / 07:19 / http://www.experiencemartialarts.com

I've been looking for a good tutorial on this, excellent job!

myownshit.dk / 16/10/2006 / 08:09 / http://www.myownshit.dk

So simple. I often used something linke this but never read about it anyware. Thanx for the articale

Ivan Minic / 16/10/2006 / 09:19 / http://www.burek.co.yu

Tableless is the way to go ;)

Steve / 16/10/2006 / 09:43

I think you should at least have correct code yourself. There are a few typos in your code :-/

milo317 / 16/10/2006 / 10:08 / http://milo.peety-passion.com

Very good tutorial, thanks a lot for developing it.

Mukund / 16/10/2006 / 12:01 / http://www.targetit.net

Thank you.

But I noticed that your own site is not a "liquid layout" type? :P

I'll try to convert mine into that type.

streamcast / 16/10/2006 / 12:32 / http://www.streamcast.eu

Creating a css layout is still quite difficult. A lot of people are looking for a wysiwyg editor like frametastic. ;)

jason / 16/10/2006 / 12:43

Just curious, why would you choose to use HTML 4.01, which is quickly approaching its 6th birthday (released on 18 Dec, 1997)???

XHTML was designed to degrade gracefully, so why not use that? Personally, I wouldn't build a new site today if it wasn't XHTML 1.1 -- should make the transition to the future, i.e. XHTML 2.0 much less painful.

John Oxton / 16/10/2006 / 15:08 / http://joshuaink.com

"Just curious, why would you choose to use HTML 4.01, which is quickly approaching its 6th birthday (released on 18 Dec, 1997)???"

Rather than comment here, I'll leave you a link to start you research :)

http://www.456bereastreet.com/archive/200606/html_vs_xhtml_on_standards_compliant_websites/

Matt Robin / 16/10/2006 / 16:42 / http://www.mattrobin.com

Good article mate - nicely written and the sort of thing that's needed on the web in a big way.

Jason: John's explained about his HTML 4 fetish....erm, preference...before. Visit his site and read this article:
http://joshuaink.com/blog/540/why-its-now-ex-html

;)

bill / 16/10/2006 / 16:58

I guess I'm not smart enough to get this to work but the typos in the article don't help.

Carlos Eduardo / 16/10/2006 / 17:08 / http://project47.viscontbox.com

Well, I like very much this tutorial...

I think it will help me in the future, surely.

Frank / 16/10/2006 / 17:13 / http://none yet

Thanks a bunch for this help, really do appreciate it and got everything to work great in firefox, but in IE, the secondary content is displayed just below the footer. Not sure why... I've done this three times, maybe I'm just a knucklehead :)

Again, thank you so much.

Frank

J. ter Horst / 17/10/2006 / 11:53 / http://www.hfdesign.nl

great article, making your design liquid asks for a new approach witch is very well done by vivabit. It's not that hard to make al liquid design but it is hard to make it look good

Shani elharrar / 17/10/2006 / 16:12 / http://skrap.novel.co.il

Thanks for the great article,
I Really needed that :) hopefully my next design will by liquid.

Ben / 17/10/2006 / 21:31 / http://www.bugben.com

Don't copy/paste code from this article.. There's a ton of typo's and the quotes are typographers quotes. It'll send you into a world of frustration if you don't see it.

Susan Kitchens / 17/10/2006 / 23:31 / http://www.2020hindsight.org/

Itsy bitzy typo on your initial HTML for the page:

<div id="footer"

You need a closing angle bracket for the div.

Todd / 18/10/2006 / 00:04

I had trouble getting it to work too at first. I had copied all of the code from the text here and the styles just would not do anything. After trying all sorts of logical and illogical variations with no success, I finally had a look at the copied code in a hex viewer.

All of the double-quotes from the copied code came through as hex 94 instead of hex 22. After replacing them it all worked correctly.

Shrinivasan / 18/10/2006 / 07:28

Nice article. I use this to start my works for my peojects.
Thanks a lot.

John Oxton / 19/10/2006 / 08:31 / http://joshuaink.com

"There's a ton of typo's"

Well how about pointing out the typos Ben?

Norb / 19/10/2006 / 09:29

"but it is a bad idea to steal copyrighted code or design, even basic HTML" WTF? please show me just one webdeveloper that not uses "stolen code" or at least code fragments...

in my opinion anyone who publishes source code viewable work to the web must live with this!

if somebody uses onlystolen code for "his/her" site, his/her fault! he/she won't learn anything...

Coco / 19/10/2006 / 19:05 / http://www.beautifulontheinside.piczo.com

Awesome tutorial!

Don M / 20/10/2006 / 12:15 / http://www.bloggingmuses.com

After fixing the typos I walked through the design process. I got a design that looks like shite.

The footer is directly under the header and the main content and sidebar are positioned on the top of the footer.

It would be nice if the author had a working sample page of what he just did so we can also verify the accuracy of everything. Based on the code errors alone I am assuming he didn't actually RUN the code he posted on here but just wrote from memory?

dm
www.bloggingmuses.com
The #1 Blog for Songwriters

Craig / 22/10/2006 / 09:26

Typos:
- All double quotes inthe markup are wrong (I guess your blog template is reversing them?)
- div footer missing an angle bracket

Henry Beitz / 22/10/2006 / 13:13 / http://henry.beitz.org

I totally agree that CSS and fluid sites are the only way to go. My own site is not really a website - but just a pitch for fluid design. Two other sites I've authored in a similar fashion may be seen here:

http://www.williamsgray.com

http://www.powerofgood.net

The main problem with IE is that their 'box' model uses a lousy definition for dimensions. If IE ever uses the same 'box' model as everyone else all the problems will go away. The book - CSS Hacks & Filters by Joseph W. Lowery (ISBN 0764579851) - describes this well.

John / 03/11/2006 / 04:21

Thank you. Worked very well. The only 'typos' I noted were due to article text pasting as forward quotes instead of standard ones. I corrected and the examples worked as explained.

By the way, 9+2 could be 92 if the + is interpreted as "and", but your script doesn't accept that answer. Is that a bug?

Whoo! I have chocolate! / 12/11/2006 / 22:35

Great article, I really needed to know how to do this type of thing. ^_^

Dave / 27/11/2006 / 03:12

Like this a lot. I'm just starting out in web design and I find tutorials like this one a great source for ideas, as well as just learning new techniques. So if I'm up all night playing with this it's your fault, okay? Keep 'em coming!

kenriche.com / 18/12/2006 / 08:15 / http://www.kenriche.com

Really great article

sumit / 25/12/2006 / 14:57 / http://www.sstdesigns.com

Great article, really very very informative & useful.

thanks
sumit

Jimmy / 04/01/2007 / 01:52 / http://www.mentallyretired.com

I'll have to be the first to disagree with this article. Absolute positioning shouldn't be used to create fluid layouts. There's nothing changing about something that's absolute; it's the very definition of he word. Although I haven't tested your layout, I would assume it doesn't collapse properly in the true sense of a "fluid" layout. (I'll get flamed for not testing it... sorry, I'm on a laptop in the web command center of a very major corporation right now monitoring a major site launch)

In fact, for any real life scenario, fluid layouts aren't even doable as there is generally a creative department that dictates what website looks like. (That doesn't make it right, I know. I'll get flamed for this too I'm sure.).

I'm all for proofs of concepts though.

Amanda Roncin / 17/01/2007 / 20:02 / http://Cayla Creations (not up yet)

That is very awesome. I am still fairly new to all this, and I was wondering if I have a three content div layout, would the easiest method be to use floats? Or is there another method that would be easier. My problem is with the positioning as when the widths inlarge the divs inlarge but do not move and so they run into one another.

Md. Rayhan Chowdhury / 26/01/2007 / 04:45

Its a nice beginning for me towards liquid layout. Thanks for nice tutorial. I hope you will post more details on this topic for realistic layout.

Sun Bingo / 27/01/2007 / 10:07 / http://www.sunlight-bingo.co.uk

Great article, I really needed to know how to do this type of thing.

Adam / 03/03/2007 / 15:45 / http://xyzu.org

Well, that was so easy. I allways thought that percentages for heights where good though?

Zotter / 05/03/2007 / 15:11 / http://www.feinkostseite.de/

Great and helpful article. I hope for more informations.

gutschein / 11/03/2007 / 15:13 / http://www.gutscheinauskunft.de

Great work.

Greetings,
Markus

pcmasters / 17/03/2007 / 19:31 / http://www.pcmasters.de

simple working. thanks for the support and help.

ralf / 18/03/2007 / 16:30 / http://www.datetic.com

Thanks for the great article – very useful information.

verkaufsagent / 19/03/2007 / 13:44 / http://www.verkaufsagent.de

Thanks for this document i`m search many days in the world wide web,but now i found this information on your site.

Thanks for help,thats the answer of all my questions i`v had

Thanks again

Timo

Toner-Versand / 24/03/2007 / 17:57 / http://www.toner-versand.de

A quite intresting idea is realized in this website!

gutschein / 24/03/2007 / 21:58 / http://www.gutscheinauskunft.de

Excellent site! Great article and amazing design. I found everything I looked for.

gutschein / 24/03/2007 / 22:18 / http://www.gutscheinauskunft.de

Thank you for this good information. I am glad of reading interesting comments

minin / 25/03/2007 / 13:01 / http://www.torrentmania.info

Very good tutorial, thanks a lot for developing

check / 27/03/2007 / 21:29 / http://www.dsl-check.net

Well done, great work, thanks.

de Mon / 31/03/2007 / 12:52 / http://www.inside-marketing.net

nice tut, please write some more about liquid designs i really interested in that kind of stuff.

Corleone / 31/03/2007 / 16:24 / http://www.planet-ali.de

great work! very helpful! go on!

free iphone / 02/04/2007 / 06:33 / http://www.your-free-iphone.com/

I've been looking for a tutorial like this one, good job!
I'm starting a new website, I'm sure it will be useful, thank you!
*bookmarked*

pozycjonowanie / 03/04/2007 / 12:30 / http://www.seotools.pl

I'm using this ! very helpful

gry / 04/04/2007 / 10:23 / http://www.torrentmania.info

Very cool tutorial, thanks a lot

Heinz / 05/04/2007 / 10:36 / http://www.heinz-bilda.de

People use CSS2 all the time, and they even already use parts of WHATWG HTML5 (like the CANVAS element, or contentEditable).
I do not believe that the W3C HTML WG will complete recommendation status by 2008; and neither do I believe that that WG shall be disbanded late 2010.
Specification are usable before being finished but not before those parts are incorporated into User Agents, e.g., browsers. Safari, Mozilla and Opera (since they’re the copyright holders) may be the first to include HTML5 elements and attributes once they become stable, Right?

Heinz / 05/04/2007 / 10:37 / http://www.heinz-bilda.de

People use CSS2 all the time, and they even already use parts of WHATWG HTML5 (like the CANVAS element, or contentEditable).

Vitaliy / 09/04/2007 / 01:17 / http://www.design4u.org

Great work, i try to translate all this now :)

Ecki / 13/04/2007 / 18:26 / http://www.branchen-listing.de

Fantastic article covering some points I really needed some good usability info for. Thanks

Algen / 14/04/2007 / 00:48 / http://www.gourmantis.de/Algen-s.html

I like this barriere free template designs, they´re simple and powerful. Thank you! A.

Bernadette / 14/04/2007 / 11:22 / http://www.bernadette-naeger.de

Really helpful, thank's for this!

einemillioneurohomepage / 15/04/2007 / 00:25 / http://www.einemillioneurohomepage.de

I think these blog is really useful for new comers and Excellent resource list.
It´s a very interesting Blog and simple answer of many questions.
Keep up the good work!
Thanks it helps me a lot…

Gartenfackeln / 15/04/2007 / 07:50 / http://www.villacasa.de

Excellent site! Great article and amazing design. I found everything I looked for.

xiuk Internet seo marketing / 15/04/2007 / 10:23 / http://www.xiuk.de

Great work. just keep it up.
I started learning CSS myself and i am always impressed when i see results of pro´s
thank and congrats

xiuk seo internet marketing

katalog / 16/04/2007 / 20:46 / http://katalogowiec.forum-gsm.info

Tableless is the way to go ;)

Stan / 17/04/2007 / 21:09 / http://www.wunschkennzeichen-discount.de

Thanks for this great article, ,thats the answer of many of my questions i'v had!

fee / 17/04/2007 / 22:53 / http://www.blog-gu.com

--It all makes sense.--
I miss a few notes about resizing sites for mobile use (browsing from wireless devices). Your considerations about dimension units and percentages seem directly applicable to small screens, but I'll put test a few of them myself.--

Eckbert Heinenberg / 20/04/2007 / 06:40 / http://www.heinenberg.de/reise-spider/

Fantastic article covering some points I really needed some good usability info for. Thanks

ralf / 20/04/2007 / 14:57 / http://www.datetic.com

Thanks, i was desperately looking for that info!, great article covering some points I really needed, some good usability info for.

rabbit / 21/04/2007 / 11:46 / http://www.milage.eu

I beginning to learn css by selfmade. css constructions was great.

urlish / 22/04/2007 / 15:57 / http://craigslist.2pt.net/

Fantastic article covering some points I really needed some good usability info for.

peter / 22/04/2007 / 21:35 / http://www.wallpaper-gu.com

thank you

tom / 23/04/2007 / 10:38 / http://www.cartoon-coloring-pages.com

very nice

robert / 26/04/2007 / 12:11 / http://www.madaboutbingo.co.uk

Great and helpful article. I hope for more informations.

kenny / 02/05/2007 / 22:55 / http://www.onfitness.eu

Nice article with of interesting Themes.

Christopher Bond / 03/05/2007 / 07:56 / http://politicnews.org/

I searched a long time for such an great article. Thank you very much.
You have to be patient with such material if you're really interested in extracting some info off.

Regenbekleidung / 04/05/2007 / 16:19 / http://www.lekimo.de/

Great and excellent article t’s realy helpful. Thanks again.

pabx / 11/05/2007 / 06:48 / http://www.oavip.net

I wouldn't build a new site today if it wasn't XHTML 1.1 -- should make the transition to the future, i.e. XHTML 2.0 much less painful

pabx / 11/05/2007 / 06:53 / http://www.oavip.net

I started learning CSS myself and i am always impressed when i see results of pro´s
thank and congrats

Tapeten / 12/05/2007 / 18:01 / http://www.tapetenversand24.ch/

Great and excellent article t’s realy helpful. Thanks again.
Wow. Very impressive.

Groschen / 14/05/2007 / 20:06 / http://www.jatismo.de/

Thanks for this tutorial.

Tee / 14/05/2007 / 22:05 / http://www.mostreview.com

Wow. Very impressive. Nice design.

johnyd / 17/05/2007 / 06:20 / http://www.sms-puls.de

helpful article .thx

geldfritz / 20/05/2007 / 18:25 / http://www.geldfritz.de/

Excellent site!

Karsten / 21/05/2007 / 10:35 / http://www.bdb-solutions.de/

Thanks for this tutorial.

Robert / 26/05/2007 / 11:45 / http://www.info-aerzte.de

I will follow your designing tips, thanks for sharing these...

Oyunlar1 / 06/06/2007 / 21:02 / http://www.haydioyuna.com

Thanks for this tutorial.

Big para / 12/06/2007 / 00:46 / http://www.bigpara.net

raywolf, once someone wants to come and appeal something, it makes sense to ask a human to check into it in more detail. We rely on StopBadware because of their expertise for the appeal. They’d be the people to ask about how long appeals take (I think they shoot for a decision within 10 business days, maybe?).

Meso / 20/06/2007 / 16:16 / http://www.mesothelioma-all.info

amazing tutorial with easy to follow step by step instructions i love it! please give us more of your little design-secrets.

Rainer / 21/06/2007 / 19:25 / http://www.feike.biz/weblog

It's very late for this - but anyway, thanks for this great intro to floating css layouts. It's specially great to use together with clagnut's em text-sizing.

Mathias / 17/07/2007 / 10:46 / http://www.dergutscheinblog.de

Thanks for your help!
I'll try to use it.

Adam / 19/07/2007 / 20:03 / http://forum.sysprofile.de

hey, it works great thanx!
greetz from germany, adam

Mario / 10/08/2007 / 07:09 / http://www.100ct.de

Thanks, the hint with Shaun Inman’s superb Clearance method was new for me, i will try to follow it....

Geek07 / 16/08/2007 / 09:27 / http://www.geekland.de

Thanks for this step-by-step intro. I am going to redesign my wiiclub.de pages with a totally new and selfmade drupal theme. Will use your knowledge there. Thanks again.

Tommy / 22/08/2007 / 06:03 / http://groups.msn.com/dir99999/

Thanks a bunch for this help really do appreciate it and got everything to work great in firefox, but in IE, the secondary content is displayed just below the footer. Not sure why.I've done this three times, maybe I'm just a knucklehead :)

thank you so much.

Tommy

Steve Roth / 26/08/2007 / 11:32 / http://www.mutual-funds-advisor.com

I wish there were more articles like this one when I first started to make liquid layouts. I design mainly business sites that should reach as largest audience as possible and personally I find liquid designs a must for this purpose. After all what would be a static design worth if it is being viewed in the wrong resolution...
I take it as a challenge to design more and more "complicated" designs that look equally good when viewed in different resolutions so thank god there are articles like yours on the web :)

online shopping / 27/08/2007 / 10:59 / http://www.factoryfast.com.au

Great tutorial.
Liquid layouts, in my opinion, are better – as long as they're done right! When it comes to a sight with heavy advertising, liquid layouts can work against you. You need to figure out a sort of middle – of – the – road layout, so that it won't bug people when they come to the sight.
This is especially going to be important in mobile browsing, I think, especially if mobile browsing all goes the way of the new Safari on the iPhone.
Interesting comments here as well.

Udo / 27/08/2007 / 16:05 / http://www.rankingplus.de

I think liquid layout are only usefull for sites with much text.
Have you seen a flex layout with a few text lines ?
Hope not.
And it's not easy to place graphics between the text
making the site looking good.

Udo

Matt / 28/08/2007 / 16:11 / http://www.matthewrdaniels.com

Thanks so much for this! I found it's really hard to find a good liquid layout tutorial.

Markus / 28/08/2007 / 18:20 / http://gutscheine.preistipp.eu

Thanks, I got it. Your example is a good basic for developing individual liquid layouts.

Axel / 28/08/2007 / 18:31 / http://www.raba.tt

I also prefere liquid layouts. Like the http://www.clagnut.com design better than most Blogs. Thanks for this post.

Mark / 31/08/2007 / 23:01 / http://free-iphone-apple.blogspot.com

I absolutely LOVE liquid layouts.

Thanks for yet another good article about this kind of stuff. :)

Marco / 03/09/2007 / 19:58 / http://www.audiolab.de

Really a good basic design example, i will improve it a bit, soon it will be online under http://www.chip-profi.de ...

portrait artist / 06/09/2007 / 06:41 / http://www.portraitkingdom.com

Great tutorial! Now I have another interesting activity for my students. My previous CSS activity was how to make collapsible table cells. Although not all of my students did it right I hope this one will be a more interesting project for them.

Pierce / 10/09/2007 / 20:55

Wow! thanks a lot people!!! this really helps me out! think this will help solve a big problem I having with a page i'm working on, thanks!

Stefan / 16/09/2007 / 09:08 / http://www.passivhaus-konkret.de

Ver nice ideas. I have to rework my site anyway, maybe this time it is getting a bit cooler ;-)

Stanley / 26/09/2007 / 17:56 / http://www.bestpricecomputers.co.uk/glossary/

>>I have developed quite a habit of applying garish colours to my development work
Actually, that's a good tip. As long as you remember to change them back to the company's corporate colours, of course ;)

proxiss München / 02/10/2007 / 15:46 / http://www.proxiss.de

Well, I used your concept as a starting point, thanks.
When I was trying to create like 8 floating sections I got a "div" overdose. Here tables are the preferable way - at least until the table layout for blocks is supported by all browsers.

Peter / 02/10/2007 / 17:21 / http://forum.sysprofile.de

Thanks for this article i`m search many weeks,but now i found this information here.

Thanks for help!
Peter

TMaxim / 10/10/2007 / 09:18 / http://www.faberlica.com

Yury, maniac logo designer / 13/10/2007 / 16:59 / http://www.logodiver.com/

Tried this, but it seems that there's some problems in Safari - though I need to double check it.

TMaxim / 18/10/2007 / 10:51 / http://www.proflogistics.ru

You mean what typing errors?

jay / 24/10/2007 / 05:19

i dont see it working as it is supposed to , the background colors do not display.

linen / 13/11/2007 / 05:27 / http://www.factoryfast.com.au

Liquid layouts are really brilliant. I'm surprised with the amount of designers that don't use liquid layouts. Personally, when I'm surfing, I find a liquid layout design so much easier to use and more comfortable to read and access. The lack of liquid layouts from many other sites is pretty startling : and it can get so iritating when you HAVE to maximise the window just because the website designer didn't put that extra effort in. Thanks for this article, I think it's going to be very helpful.

Philipp / 18/12/2007 / 12:12 / http://www.rechtsanwalt-blawg.de/

Well I am kind of late to this post - but I don't wanna miss to say that I used your template a lot the last view months. Every time I start creating a templ for drupal or wordpress from scratch, I start with your "simple liquid layout". So this post is part of my "research" tab. Thanks.

Timur / 23/12/2007 / 18:15 / http://www.senkrecht-it.com

hm i have some problems with safari too, but in firefox it's ok!

Berta Berlin / 17/01/2008 / 07:07 / http://www.anwalt-seiten.de

I still have tabular layout, but planing to do a relaunch with liquid CSS technique. Anybody with experiences how that effects SE ranks?
Thanks for that article!

jac / 22/01/2008 / 18:55 / http://www.wiaderko.com

The lack of liquid layouts from many other sites is pretty startling : and it can get so iritating when you HAVE to aximise the window just because the website designer didn't put that extra effort in. Thanks for this article, I think it's going to be very helpful.

Nils / 28/01/2008 / 22:25 / http://online-shopping-blog.de/

I never managed to create a liquid layout that actually works well in all major browsers :(
This was a great read, I guess my next layout will be liquid :)

Oliver / 06/02/2008 / 13:22 / http://www.yapool.de

hm i have some problems with safari too, but in firefox it's ok!

Chris / 20/02/2008 / 13:24 / http://www.plau-it.de

good article, but i prefer to mix liquid layout, with fixed cells, because it helps to make a better text layout

Gutscheine / 15/03/2008 / 16:45 / http://www.gutscheinbunker.de

With the new Safari Build from Apple's developer resources it works. Seems that only the "older" Safaris that are public have problems.

Just download the newest build from Apple's developer connection and there you go!

Jeffrey Monroe / 03/04/2008 / 22:03 / http://www.interstartv.com

Found this article searching 'liquid layouts'
I just got done checking my analytics and it's glaringly obvious that I have to redesign my site with a liquid layout. 1024x768 is the most popular screen resolution, but it comes in at only 23%! Got 3 other resolutions in the teens and the rest is spread out. Glad to see 800x600 only coming in at 3% though, haha.

Thanks for this article John! It's still very helpful.

Steve / 06/04/2008 / 23:12 / http://www.gadgets4nowt.co.uk

Yeah, I'd had problems with the older Safari's so use Firefox. Glad you added the link to Shaun Inman's guide on footers, that has always been a bugbear too.

.net /develop/discover/design

/CSS/ Create a simple liquid layout

Comments

Issue 176

Quick Links