Three column header with fluid center column with tabbed navigation

Recently in my one of my projects I needed to create a layout for header. It was a little complicated layout for me and here I want to present a demo page for the header I ended up creating. Hope this helps anybody who is trying to solve a similar problem.

Header needed to have three columns. Side columns should have fixed width and center column should be fluid. Center column has a tabbed navigation menu. While the center column is fluid I didn’t want horizontal navigation menu to span the entire center column because that creates too much distance between the tabs. (I have max five tabs). Minimum header this header supports is 1024px. I had the liberty of using as much CSS3 as I can with providing somewhat degraded experience to the browsers that don’t support CSS3. I also wanted the tabs to have min-width and max-width and when the text length hits the max-width, I wanted it to wrap to second line by staying vertically aligned middle. For smaller screen support I am using css media queries to change some styles. Thanks to Kristopher and Gabriel in helping me figure out the issues with small screen support and vertically aligning the tab text in the middle when it wraps to second line.

Following are the tools/techniques I used for this:

  • Holygrail technique for the three column layout
  • CSS3 for tabbed navigation menu
  • display:inline-block and shim technique for keeping the wrapping tab text vertically aligned middle
  • Media Queries to support smaller screens
  • jquery smartresize plugin to add support for smaller screens on IE6/7/8 [ not included in the demo ]

View Demo

11 Jul 2011 03:52 am

One Response to “Three column header with fluid center column with tabbed navigation”

  1. This post was just what I was looking for. Thanks!

Leave a Reply

Archived Entry