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

  1. 1
    The Perfect 3 Column Liquid Layout
    4 people · 62 points · first shared 2008 · 44 comments on HN
  2. 2
    CSS3 Starbursts
    2 people · 9 points · first shared 2010 · discussion on HN
  3. 3
    Exploring Web Typography in a Interesting way
    2 people · 3 points · first shared 2009 · discussion on HN
  4. 4
    CSS: Margin Top vs. Bottom (A Trick You Should Know)
    2 people · 2 points · first shared 2019 · 1 comments on HN
  5. 5
    The art of sharpening pencils (2007)
    1 people · 144 points · first shared 2022 · 25 comments on HN
  6. 6
    Synesthesia helps me find four-leaf clovers (2023)
    1 people · 71 points · first shared 2025 · 55 comments on HN
  7. 7
  8. 8
    The art of sharpening pencils (2007)
    1 people · 33 points · first shared 2016 · 8 comments on HN
  9. 9
  10. 10
  11. 11
    Ultimate 2 column left menu ems
    1 people · first shared 2010
  12. 12
    Bottom footer
    1 people · first shared 2019
  13. 13
    Equal height columns 2 column
    1 people · first shared 2012
  14. 14
    Ultimate 3 column holy grail pixels
    1 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).
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
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 ?

Keyboard shortcuts

/Search
j kNext / previous blog
EnterOpen selected blog
vVisit the blog site
fFollow / unfollow
lSwitch grid / list view
dSwitch dark mode
g hHome
g pTop posts
g tTopics
g fFollowing
g lLiked
g yHistory
g qFAQ
EscBack / close