{"id":1654,"date":"2008-12-01T05:45:39","date_gmt":"2008-12-01T12:45:39","guid":{"rendered":"http:\/\/css-tricks.com\/?p=1654"},"modified":"2008-12-01T07:23:11","modified_gmt":"2008-12-01T14:23:11","slug":"upward-growing-tabs","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/upward-growing-tabs\/","title":{"rendered":"Creating Tabs That Behave"},"content":{"rendered":"

When creating navigational tabs that use real web text, some positioning issues may arise when that text is resized. The natural flow of a web page when text is resized is to push down. This can push your main content area down and\/or force the tabs into that area. Using some smart CSS, we can fix this issue by creating tabs that grow upward<\/strong> when text is resized.<\/p>\n

Bad Example<\/h3>\n

\"\"<\/p>\n

View Bad Example<\/a><\/p>\n

In this example of bad tab behavior, when text is resized the tabs grow downward and push into the main content area. <\/p>\n

One solution could be to have the tabs push down the main content area as they grow. In this example that may be fine, but that may be unacceptable for a more image-based design or for folks nervous about losing content below the “fold”.<\/p>\n

Good Example<\/h3>\n

\"\"<\/p>\n

View Good Example<\/a><\/p>\n

In our good example, the main content area stays put. The tabs grow upward and the rest of the text grows downward as usual.<\/p>\n

The Trick<\/h3>\n

The meat of the trick is using two nested block level elements. The outside block controls the positioning. We need to lock to the top of the main content, so the outside block needs top: 0;<\/strong>. The inside block then sticks to the bottom of the outside block with absolute positioning. By setting a fixed bottom value, bottom: 0;<\/strong>, the menu items have no where to grow but up.<\/p>\n

Menu markup:<\/p>\n

<div id=\"nav\">\r\n\t<ul>\r\n\t\t<li><a href=\"#\">Tab 4<\/a><\/li>\r\n\t\t<li><a href=\"#\">Tab 3<\/a><\/li>\r\n\t\t<li><a href=\"#\">Tab 2<\/a><\/li>\r\n\t\t<li><a href=\"#\">Tab 1<\/a><\/li>\r\n\t<\/ul>\r\n<\/div><\/code><\/pre>\n
Code purists will notice right away the common folly of wrapping an unordered list in a div unnecessarily. In our case though, it is very necessary, and we need both of those block level elements for our trick.<\/p>\n
CSS for the two blocks:<\/p>\n
#nav\t { \r\n   position: absolute;\r\n   left: 0; \r\n   top: 0; \r\n   width: 100%; \r\n   height: 0;\r\n}\t\t\r\n#nav ul { \r\n   position: absolute; \r\n   bottom: 0; \r\n   right: 0; \r\n}<\/code><\/pre>\n
Here is a visual:<\/p>\n
\"\"<\/p>\n
Note<\/h3>\n
This is becoming less and less of an issue as more browsers are using full zoom<\/a> instead of straight text resizing. But still, it’s just good responsible design at this time.<\/p>\n","protected":false},"excerpt":{"rendered":"
When creating navigational tabs that use real web text, some positioning issues may arise when that text is resized. The natural flow of a web page when text is resized is to push down. This can push your main content area down and\/or force the tabs into that area. Using some smart CSS, we can […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":157751,"url":"https:\/\/css-tricks.com\/svg-tabs-using-svg-shape-template\/","url_meta":{"origin":1654,"position":0},"title":"SVG Tabs (Using an SVG Shape as Template)","date":"December 4, 2013","format":false,"excerpt":"An excellent feature of SVG is that you can define a shape (or set of shapes) once, and then use it multiple times throughout a page. You can even apply different fills and filters and whatnot to the different versions. SVG templating, if you will. Let's see if we can\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":160842,"url":"https:\/\/css-tricks.com\/changing-spaces-tabs-sublime-text\/","url_meta":{"origin":1654,"position":1},"title":"Changing Between Spaces and Tabs in Sublime Text","date":"January 20, 2014","format":false,"excerpt":"Sublime Text is pretty dang good at making it easy to switch between using tabs and spaces to indent your code. More importantly, it makes it easy to adjust the indentation of code that doesn't match your preference. I thought I'd put this together for reference, as there is a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":155224,"url":"https:\/\/css-tricks.com\/transformer-tabs\/","url_meta":{"origin":1654,"position":2},"title":"Transformer Tabs","date":"November 5, 2013","format":false,"excerpt":"Tabs are a simple design pattern in which a row of links are obviously clickable navigation and when a link is clicked, new content is shown. There are loads of variations of course, but it's one of the most ubiquitous navigation design patterns out there. When arranged in a horizontal\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":345404,"url":"https:\/\/css-tricks.com\/safari-15-opinions\/","url_meta":{"origin":1654,"position":3},"title":"Safari 15 Opinions","date":"July 28, 2021","format":false,"excerpt":"It was interesting that when Safari 15 was dropping at this last WWDC, in my circles at least, I mostly heard enthusiasm. Like the colors-in-the-browser-controls stuff was a neat trick and fun to play with. And there were other more serious features, like iCloud Private Relay, which were near-universally applauded\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/safari-15-tabs.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":302594,"url":"https:\/\/css-tricks.com\/resize-none-on-textareas-is-bad-ux\/","url_meta":{"origin":1654,"position":4},"title":"“resize: none;” on textareas is bad UX","date":"January 30, 2020","format":false,"excerpt":"Catalin Rosu: Sometimes you need to type a long reply that consists of many paragraphs and wrapping that text within a tiny textarea box makes it hard to understand and to follow as you type. There were many times when I had to write that text within Notepad++ for example\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/css-resize-none-textarea-bad-ux.png?fit=800%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":441,"url":"https:\/\/css-tricks.com\/resizeable-images-at-full-resolution\/","url_meta":{"origin":1654,"position":5},"title":"Resizeable Images (At Full Resolution!)","date":"January 29, 2008","format":false,"excerpt":"Most web browsers make resizing text an easy thing to do*, but not all web browsers will resize images along with that text**. Good web designers know this and go to great lengths to make sure their web layouts don't bork when text is resized. But did you know you\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/1654"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=1654"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/1654\/revisions"}],"predecessor-version":[{"id":1681,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/1654\/revisions\/1681"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=1654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=1654"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=1654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}