Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Position divs from the bottom to the top

Position divs from the bottom to the top

Problem

I want to create a tabbed pane in which the tabs are ordered this way:

----------------------------------
-tab6 | tab7                     -
-tab1 | tab2 | tab3 | tab4 | tab5-
----------------------------------

Setting tab1 on the bottom left is position is no problem, but when the line wraps, tab6 and tab7 are at the bottom like this:

----------------------------------    
-tab1 | tab2 | tab3 | tab4 | tab5-
-tab6 | tab7                     -
----------------------------------

Is there a way to change that "read order"?

HTML


CSS

#header {
    width:500px;
    height:300px;
    position:relative;
    border:1px solid red;
}

#nav_tabs {
    position:absolute;
    bottom:0;
    left:0;
}

.tab {
    float:left;
    margin-right:5px;
}

Here is what looks like now: http://jsfiddle.net/qpHNN/336/

Problem courtesy of: Rooboo

Solution

Well, IMO there's probably no way to reorder these elements to flow them from bottom to top.

However, you could fake the effect by using transform: rotate(180deg) for the #nav_tabs element (the container) and negate the rotate effect for each .tab by rotate(-180deg), as follows:

#nav_tabs {
    /* other styles... */
    transform: rotate(180deg);
}

.tab {
    /* other styles... */
    transform: rotate(-180deg);
    float: right;  /* in this case you need to float the elements contrariwise */
}

WORKING DEMO.

Solution courtesy of: Hashem Qolami

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Position divs from the bottom to the top

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×