Need someone to lead product management at your software company? I create software for people that create software and I'm looking for my next opportunity. Check out my resume and get in touch.

Tab Wraps

Freshness Warning
This blog post is over 20 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.

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.

This discussion has been closed.

Recently Written

Mastery doesn’t come from perfect planning (Dec 21)
In a ceramics class, one group focused on a single perfect dish, while another made many with no quality focus. The result? A lesson in the value of practice over perfection.
The Dark Side of Input Metrics (Nov 27)
Using input metrics in the wrong way can cause unexpected behaviors, stifled creativity, and micromanagement.
Reframe How You Think About Users of your Internal Platform (Nov 13)
Changing from "Customers" to "Partners" will give you a better perspective on internal product development.
Measuring Feature success (Oct 17)
You're building features to solve problems. If you don't know what success looks like, how did you decide on that feature at all?
How I use OKRs (Oct 13)
A description of how I use OKRs to guide a team, written so I can send to future teams.
Build the whole product (Oct 6)
Your code is only part of the product
Input metrics lead to outcomes (Sep 1)
An easy to understand example of using input metrics to track progress toward an outcome.
Lagging Outcomes (Aug 22)
Long-term things often end up off a team's goals because they can't see how to define measurable outcomes for them. Here's how to solve that.

Older...

What I'm Reading

Contact

Adam Kalsey

+1 916 600 2497

Resume

Public Key

© 1999-2024 Adam Kalsey.