CODEWITHSUNDEEP
htmlcsstabscss-float
Redtopia
Redtopia

Reputation: 5247

Floating divs from bottom to top using CSS?

I'm displaying a set of tabs that need to wrap in a responsive layout. Is it possible to wrap them so that they align to the bottom?

Here's how they currently wrap:

enter image description here

I would like to eliminate the space below the top row so that there would be only 1 tab on the top, and 4 tabs on the bottom. This is a responsive layout, so it needs to be fluid. I'm looking for a pure CSS solution.

Here's my code:

#tabs {
    border:1px solid red;
    padding:0 5px 5px 5px;
}

#tabs ul {
    list-style:none;
    margin:0;
    padding:0;
}

#tabs li {
    float:left;
    margin:5px 0 0 -1px;
    border:1px solid #ccc;
    padding:5px 10px;
}

<div id="tabs">
    <ul>
        <li><a href="#"><span>Tab 1</span></a></li>
        <li><a href="#"><span>Tab 2</span></a></li>
        ... etc ...
     </ul>
    <div style="clear:both;"></div>
</div>

Here's a jsfiddle: http://jsfiddle.net/PGypn/

Upvotes: 1

Views: 502

Answers (2)

web-tiki
web-tiki

Reputation: 103830

You can use this CSS3 property : flex-wrap: wrap-reverse.

#tabs ul {
    display: flex;
    flex-wrap: wrap-reverse;
    list-style:none;
    margin:0;
    padding:0;
}
#tabs li {
    margin:5px 0 0 -1px;
    border:1px solid #ccc;
    padding:5px 10px;
    
}
#tabs {
    border:1px solid red;
    padding:0 5px 5px 5px;
}
<div id="tabs">
    <ul>
        <li><a href="#"><span>Tab 0</span></a>
        </li>
        <li><a href="#"><span>Tab 1</span></a>
        </li>
        <li><a href="#"><span>Tab 2</span></a>
        </li>
        <li><a href="#"><span>Tab 3</span></a>
        </li>
        <li><a href="#"><span>Tab 4</span></a>
        </li>
        <li><a href="#"><span>Tab 5</span></a>
        </li>
        <li><a href="#"><span>Tab 6</span></a>
        </li>
        <li><a href="#"><span>Tab 7</span></a>
        </li>
        <li><a href="#"><span>Tab 8</span></a>
        </li>
        <li><a href="#"><span>Tab 9</span></a>
        </li>
    </ul>
</div>

fiddle

Upvotes: 2

iDev Technolab
iDev Technolab

Reputation: 51

Here is your solution:

#tabs li {
    display:block;
    width:100%;
    margin:5px 0 0 -1px;
    border:1px solid #ccc;
    padding:5px 10px;
    text-align:center;
}

Thanks

Upvotes: -1

Related Questions