Matthew James Taylor
matthewjamestaylor.com · Personal blog · on HN since 2008
Matthew James Taylor writes about CSS layouts and web design, including the three-column liquid layout and menu techniques.
What HN saysHN links it for CSS layout references like the Holy Grail layout, equal-height columns, and margin-top versus bottom, with some commenters debating its advice.
19HN people shared it
8linked it in comments
24stories submitted
388story points
1 year agolast shared
2008people per year2026
Most-shared posts
- 1The Perfect 3 Column Liquid Layout4 people · 62 points · first shared 2008 · 44 comments on HN
- 2CSS3 Starbursts2 people · 9 points · first shared 2010 · discussion on HN
- 3Exploring Web Typography in a Interesting way2 people · 3 points · first shared 2009 · discussion on HN
- 4CSS: Margin Top vs. Bottom (A Trick You Should Know)2 people · 2 points · first shared 2019 · 1 comments on HN
- 5The art of sharpening pencils (2007)1 people · 144 points · first shared 2022 · 25 comments on HN
- 6Synesthesia helps me find four-leaf clovers (2023)1 people · 71 points · first shared 2025 · 55 comments on HN
- 7Beautiful Horizontally Centered Menus/Tabs/List. No CSS hacks. Full cross-browser.1 people · 57 points · first shared 2009 · 15 comments on HN
- 8The art of sharpening pencils (2007)1 people · 33 points · first shared 2016 · 8 comments on HN
- 9Perfect multi-column CSS liquid layouts - iPhone compatible1 people · 6 points · first shared 2008 · 1 comments on HN
- 10How to post forms to clean, rewritten URLs without JavaScript (2008)1 people · 1 points · first shared 2011 · discussion on HN
- 11Ultimate 2 column left menu ems1 people · first shared 2010
- 12Bottom footer1 people · first shared 2019
- 13Equal height columns 2 column1 people · first shared 2012
- 14Ultimate 3 column holy grail pixels1 people · first shared 2013
What HN people wrote when they linked it
devmonk · 2010-09-03
Tell him to read everything here:
http://www.smashingmagazine.com/
There are many great designers out there and unfortunately not many of them working for companies with large websites, so just going out and seeing the norm these days is not going to put him ahead of the curve.
He should get familiar with Photoshop, etc. You could try Gimp, but that might scare him away. Photo/image editing is a critical piece to almost any web design at a higher level.
He needs to understand CSS in and out and understand the ins and outs of when to use certain elements. Yes we're not in 1999, and you shouldn't use tables for layout unless you need a table (grid), but understand why, and understand how you wish you were using tables sometimes because CSS can be a pain.
Check sites like this out:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
and get familiar with the various kinds of layouts that can be used.
Understand lists, etc. Do a navigation bar with CSS hover effects, etc. Don't get caught up with dropdown and fly-out menus.
Open up pages in Lynx. Think about accessibility (the deaf, the blind, the partially blind that up their font sizes, etc.), but don't get tied down to overly-accessible sites either. Know your audience.
Javascript. JQuery. Love it. Learn it.
Prototype. Understand it, get used to it being out there. YUI- same thing.
Flash. Yes, you should learn about it along with HTML 5.
Then also get into User Experience. Best practices, etc. Maybe try out a…
Atomskun · 2019-06-17
> so the usage of margin-top should always be avoided
Not really if you consider sibling layouts, e.g.: https://matthewjamestaylor.com/css-margin-top-vs-bottom
> owl selector: performance implications - it's fairly bad from a performance POV to use it.
Arguing about "CSS performance" is futile when the real cause of bloatedness is mostly JavaScript these days (also: http://alistapart.com/article/axiomatic-css-and-lobotomized-owls).
The owl-selector can actually be quite elegant, but becomes a burden if you have lots of side-by-side blocks (which would always need to set their margin-top to 0).
pbhjpbhj · 2019-05-16
Meta: I assume you're doing a website update at the moment. I prefer the blue! Though I might still use a white version on the homepage to remove emphasis from the header. Also, on you signup page it would IMO look nicer if you pinned the page footer (eg https://matthewjamestaylor.com/bottom-footer).
waltz · 2013-05-18
I give to you, The Holy Grail
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels…
Fyrilin · 2012-07-28
You may find this useful: http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
moe · 2009-01-24
If you really think that then you have obviously never tried it.
Look here for the real solution, which is slightly more involved:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
reazalun · 2008-06-16
Check this out:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
loup-vaillant · 2010-02-16
There is one case in which I don't know how to do away without extraneous presentation divs: I want a 2-columns layout where the left column is written after the right column in my source code. Good for my eye (navigation on the left) and for search engines and text based browsers (relevant text first).
Right now, my div structure looks like this:
<body>
<header />
<div-hackw>
<div-hack1>
<div-hack2> <article /> </div-hack2>
<nav /> -- written after, displayed on the left
<div-hackw>
<footer />
<body>
http://www.loup-vaillant.fr/css/style.css
http://www.loup-vaillant.fr
inspired from http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-ems.htm (down right now).
Header, footer, nav, and article are okay (they eventually will be actual html5 tags). Hakcw, hack1 and hack2, however, are ugly. Does anyone know of a way to ditch them ?