CODEWITHSUNDEEP
csshtml
Majid Laissi
Majid Laissi

Reputation: 19788

Making the last element occupy the remaining space

I have the following HTML:

<ul style="width: 100%; height: 33px;">
    <li style="height: 33px; width: 34px;">
        <div>TEST</div>
    </li>
    <li style="height: 33px; width: 34px;">
        <div>TEST</div>
    </li>
    <li style="height: 33px; width: 34px;">
        <div>TEST</div>
    </li>
    <li style="height: 33px;">
        <div>LAST</div>
    </li>
</ul>

And CSS:

ul {
   list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid red;
}

li {
    float: left;
    list-style: none outside none;
    margin-bottom: 8px;
    padding-left: 0;
    padding-right: 4px; 
    border: 1px solid blue;
}

And I would like the last element to occupy the remaining place, so it's aligned in the right of the page.

How to do so?

Thank you

Here's a fiddle: http://jsfiddle.net/PKw9k/

Upvotes: 0

Views: 1095

Answers (2)

What have you tried
What have you tried

Reputation: 11148

You can accomplish this by using overflow: hidden on the last element and removing float

Working example:

http://jsfiddle.net/PKw9k/2/

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191749

Remove the float. You can also remove the width.

li:last-child { float: none; }

http://jsfiddle.net/PKw9k/1/

Upvotes: 3

Related Questions