Need someone to lead product or development at your software company? I lead product and engineering teams and I'm looking for my next opportunity. Check out my resume and get in touch.

Tab Wraps

Freshness Warning
This article is over 16 years old. It's possible that the information you read below isn't current.

In the last few days I’ve been asked more than once how to keep CSS tab list-based navigation from wrapping to multiple lines as the browser window shrinks.

All you need to do is set the width of your UL tag to the minimum width you need. For instance, if your design starts to wrap when the browser window falls below 500 pixels, add width: 500px; to the style for your tab’s UL tag.

Dev Anand Teelucksingh
October 11, 2003 6:56 AM

If you add "white-space:nowrap" to the style ul tab menu, wouldn't this work as well?

Adam Kalsey
October 11, 2003 8:15 AM

That doesn't always seemt o be effective. If you have the tabs laid out using floats, they'll still wrap.

norsayk
October 15, 2003 1:19 PM

Hi Adam, I'm following CSS/tab develoments with avid interest. Question: Can CSS be written to produce NavTabs that trigger SubMenuLinks on :hover? That is, the SubMenu Links appear beneath the tabs when :hover is invoked. Further, the user must be able to move the mouse to--and click--the SubMenuLinks when they appear. Is this possible in "straight" CSS? Here's a JS solution for reference: http://www.davacosourcing.com/index.asp Of course, I'd like to achieve this tab/submenulink functionality *without* JS. Thanks.

Chris Vance
October 18, 2003 10:58 AM

Norsayk, I don't think CSS has the power to modify the CSS properties of other elements. You couldn't dynamically make the submenu appear when hovering over an element, like you can with JS. The only thing I can think of is trying to figure out a way to include CSS "rules" that affect the display of the submenu and include the :hover on the main menu link. Something like: .link1:hover, .subnav1 {display: block;} OR .link1:hover > .subnav1 {display: block;} I would bet against these working. Perhaps there is some crazy proposed CSS-3 property that will make something like this work? I don't know. I've made a JS example that performs similar to your DavacoSourcing example. The example is: http://www.milamberart.com/plog_menu_test.html My explanation can be found at: http://www.plogs.net/users/andlife/15704.html -Chris

Sean
October 29, 2003 7:58 AM

Hey there.. I'm loving these tabs but I am having a serious problem with my top and bottom padding within the main content div. I am getting some weird results when nesting another div inside it. I've posted an example here: http://www.spin45.net/bug/ What I am trying to acheive is a white content box inside the padding of the tabbed div. It looks OK on IE6/mozilla, and I don't need to be pixel perfect, but on IE5.x, it seems that the "mysterious extra padding" causes a break in the yellow borders on the left and right, which is downright ugly. If anyone has any pointers, I've looked everywhere and come up empty. Since IE6 and mozilla treat my code the same way, I'm inclined to believe that It's my code and not the browser (as much as I'd love to blame the browser...) Thanks so much for the examples so far. I've been trying to build semantically correct css tabs which honour the text-size in the browser for quite some time, and this entire discussion has been a great help!

Adam Kalsey
October 29, 2003 8:15 PM

IE5 doesn't handle padding very well. It mistakenly adds the padding to the size of the box, but you can use Tantek's box model hack to fix it.

Sean
October 30, 2003 6:25 AM

Thanks, I'll take a second look at that but I'm not defining width and height properties so I'm not sure if that will apply. If not, I figure with enough tweaking over the next little while I'll stumble across a solution!

Sean
October 30, 2003 9:15 AM

I think I figured it out, in case anyone cares... The browser default margins around headings and paragraphs was breaking IE5.x, so removing the top margin fixed the gap in the border as well as the mysterious extra padding (which turned out to be extra border garbage taht was being implemented all willy-nilly-like) Thanks again for a great tab implementation!

Trackback from Amyo is a Geek
August 19, 2004 3:31 AM

Stylesheet issues

Excerpt: If you've seen my site since I added the new tab "old site", you've probably noticed the "old site" tab was sticking out a bit if you viewed in internet explorer. I didn't mind at the time, because I wanted...

Sara S
February 28, 2008 11:00 AM

I recently had to solve the problem of preventing my navigation tabs from wrapping. I couldn't set the ul width because the content was dynamic. I was using the 'sliding doors' css method of using art with transparent corners. The way I solved the problem was to put the tabs in a 'table', instead of using list elements. I wrapped the 'a' tags in 'div' elements, and placed each inside a 'td'. css classes that would otherwise apply to the 'li' now apply to the 'div.

Stephane
April 21, 2008 12:49 AM

For me, it is the other way around. I have a set of tabs that wrap when they don't have enough space to fit on one row. And that is what I want. But the problem I have is to have a few pixels margin between the tabs so that they don't stick, and a few pixels between each tab border and its text content so that the text does not touch the border. I can have it fine in Firefox, but not on both IE and Firefox. It can be seen at http://fks.thalasoft.com Click on "cliquez ici" then on the green check button.

Your comments:

Text only, no HTML. URLs will automatically be converted to links. Your email address is required, but it will not be displayed on the site.

Name:

Not your company or your SEO link. Comments without a real name will be deleted as spam.

Email: (not displayed)

If you don't feel comfortable giving me your real email address, don't expect me to feel comfortable publishing your comment.

Website (optional):

Recently Written

A framework for onboarding new employees (May 15)
There’s no single good way to onboard an employee that works for every role. Here's a framework for creating a process that you can adapt to each situation.
TV hosts as a guide for software managers (May 10)
Software managers can learn a lot from journalists or late night TV hosts and how they interview people.
The Improvement Flywheel (Apr 29)
An incredible flywheel for the improvement of a development team. Fix a few things, and everything starts getting better.
Managers and technical ability (Dec 26)
In technical fields, the closer you are to the actual work being done, the closer your skills need to resemble those of the people doing the work.
Dysfunctions of output-oriented software teams (Sep 17)
Whatever you call it, the symptom is that you're measuring your progress by how much you build and deliver instead of measuring success by the amount of customer value you create.
Evaluative and generative product development (Aug 30)
Customers never even talk to the companies that don't fit their needs at all. If the only product ideas you're considering are those that meet the needs of your current customers, then you're only going to find new customers that look exactly like your current customers.
Product Manager Career Ladder (Aug 19)
What are the steps along the product management career path?
Building the Customer-Informed Product (Aug 15)
Strong products aren't composed of a list of features dictated by customers. They are guided by strong visions, and the execution of that vision is the primary focus of product development.

Older...

What I'm Reading

Contact

Adam Kalsey

+1 916 600 2497

Resume

Public Key

© 1999-2020 Adam Kalsey.