Tab Wraps

Freshness Warning
This blog post is over 18 years old. It's possible that the information you read below isn't current and the links no longer work.

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.

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: 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: My explanation can be found at: -Chris

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: 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.

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!

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.

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 Click on "cliquez ici" then on the green check button.

This discussion has been closed.

Recently Written

The Trap of The Sales-Led Product (Dec 10)
It’s not a winning way to build a product company.
The Hidden Cost of Custom Customer Features (Dec 7)
One-off features will cost you more than you think and make your customers unhappy.
Domain expertise in Product Management (Nov 16)
When you're hiring software product managers, hire for product management skills. Looking for domain experts will reduce the pool of people you can hire and might just be worse for your product.
Strategy Means Saying No (Oct 27)
An oft-overlooked aspect of strategy is to define what you are not doing. There are lots of adjacent problems you can attack. Strategy means defining which ones you will ignore.
Understanding vision, strategy, and execution (Oct 24)
Vision is what you're trying to do. Strategy is broad strokes on how you'll get there. Execution is the tasks you complete to complete the strategy.
How to advance your Product Market Fit KPI (Oct 21)
Finding the gaps in your product that will unlock the next round of growth.
Developer Relations as Developer Success (Oct 19)
Outreach, marketing, and developer evangelism are a part of Developer Relations. But the companies that are most successful with developers spend most of their time on something else.
Developer Experience Principle 6: Easy to Maintain (Oct 17)
Keeping your product Easy to Maintain will improve the lives of your team and your customers. It will help keep your docs up to date. Your SDKs and APIs will be released in sync. Your tooling and overall experience will shine.


What I'm Reading


Adam Kalsey

+1 916 600 2497


Public Key

© 1999-2022 Adam Kalsey.