Take the 2-minute tour ×

Pretty simple question.

Its just some advice based on personal opinion and best practice. It's difficult to explain so I'll draw the best image I can. Try to imagine that I have any old website and at the very top I have a navigation bar which is broken into 3 rows.

Top is application: Settings, Profile, Login/Out Second is notification: Error, new message Third is part navigation part functional.

So we have 3 rows supporting different functionality and obviously different color schemes. Each on is no more than about 5% of the total pages height.

I supposed the question I'm asking is whats the best way to do this.

First guess was to use tables to format the data and space them out:
This worked, but It looks sloppy.

    border-collapse: collapse;
    border-spacing: 0;

seems to fill in any gaps in the table but it doesn't look right

Second guess was to use frame sets:
Shot myself a dirty look for even thinking of it

Third guess was to keep everything css and Html
Which seems like the most sensible one next to tables but keeping content organized with the multiple buttons and such sounds like it could be trouble.

was use a JQuery or javascript UI library. This presents It's own set of problems but could be the prettiest if done right.

So if it was you, how would you go about doing this simple task and why?

picture of view as requested. Part in question is top nav


share|improve this question
providing a sketch or screenshot would help for sure.... –  bpeterson76 Jul 18 '11 at 17:01
Not worth putting in an answer, but never tables for layout of anything other than tabular data. –  shanethehat Jul 18 '11 at 17:46
@bpeterson76 done. Link at bottom of question. –  overtone Jul 19 '11 at 8:20

4 Answers 4

up vote 1 down vote accepted

Don't use tables for this purpose.

Only use tables for tabular data (which this isn't).

Just use divs for the containers and lis for the menus.


This is somewhat like I would do:


This uses elements what they are meant for.

And can be easily controlled using CSS.



share|improve this answer
Why the downvote? So I can improve my answer. –  PeeHaa Jul 18 '11 at 19:03
That link is almost exactly what I had in mind. It will be a bit troublesome getting elements floating to both sides (as in there is a button on far left and a button on far right). Feel free to look at the design doc in the edited question –  overtone Jul 19 '11 at 8:26
However it would appear nav has some issues with stretching content across page. It seems to group it in a single bunch ignoring width –  overtone Jul 19 '11 at 9:36
@overtone: check out my edited fiddle. If you have any question / something doesn't work as expected just let me know and I'll try to fix it –  PeeHaa Jul 19 '11 at 9:42
Your code worked fine the first time. I removed the nav tag though and replaced the links as buttons which has caused its own set of problems. Thank you regardless –  overtone Jul 19 '11 at 11:15

I would go about this using sets of HTML uls and CSS, because that's the most forward thinking, plus it uses HTML the way it should be. However, if you want to use tables, try border: none; and border-collapse: collapse;

share|improve this answer
I was using tables and this did help immensely however your right in saying I shouldnt use tables –  overtone Jul 19 '11 at 11:14

I would go with the third guess for the presentation part, because that's the most flexible part, at least for me. If you split up all the sections correctly, then the task of managing the content will become quite easy, because you will be able to target the section and style anything with it.

In addition, I would go with the last option (i.e. vanilla JavaScript and jQuery), for client side functionality, because that's the Swiss Army Knife of DOM manipulation.

share|improve this answer

A horizontal nav bar just that -- a horizontal entity. Therefore, I wouldn't "stack" elements as rows, rather as columns. It's the difference between a huge header and something that's visually much easier to comprehend. Stretch your elements out, use icons, whatever. If you have the need to be really verbose, go with a giant menu

I personally use JQuery UI Tabs whenever possible because they're a well-established UI pattern, are easy to deploy, and automatically "Ajax Load" my pages. Sure, you get a few "gotchas" but they're nothing for a competent jQuery user to overcome.

In situations where I can't use UI Tabs, I will do a pure CSS bar across the top, "floating" via absolute positioning if that is what the client specs. Layout is no place for Tables (they are for tabular content elements) and you're right that frames have no place, period. This shouldn't be any more difficult than basic page layout, so it's a no-brainer to go this route.

For notification, there are other options that are more obvious and timely. Try the Notification Widget or StackOverflow style notifications All other small, basic info could be contained on your horizontal bar.

share|improve this answer
The bottom 2 paragraphs are still relevant but there is a screenshot as you requested in the notes. I don't think stacking them as columns will help. Please take a look and let me know if you think your answer still stands. –  overtone Jul 19 '11 at 8:23
@overtone, absolutely. One of the keys to great UI design is to hide your complexity. Just because you have an area to communicate a message doesn't mean it has to always be visible. And I do stand behind the idea that a horizontal menu shouldn't be stacked for simplicity's sake. See here for some good thoughts: uxdesign.smashingmagazine.com/2009/10/07/… –  bpeterson76 Jul 19 '11 at 14:46

Your Answer


