Fill remaining width among inline-block divs with self

[Aeonix]

 <nav>
    <div id="main">
        <div id="one">
            A
        </div>
        <div id="two">
            B
        </div>
        <div id="three">
            C
        </div>
        <div id="four">
            D
        </div>
        <div id="five">
            E
        </div>
    </div>
</nav>

<style>
#main {
    min-height: 175px;
    height: 27.5%;
    width: 100%;
    background-color: #222;
    position: fixed;
        bottom: 0;
        left: 0;
}

#navBackground {
    width: 100%;
}

nav div {
    display: inline-block;
    height: 100%;
    vertical-align: top;
}

div#one {
    width: 20%;
    min-width: 225px;
}

div#two {
    width: 20%;
    min-width: 225px;
}

div#three {
    width: 20%;
    min-width: 150px;
}

div#five {
    background-color: #DDD;
}
</style>

I would like to make div#five fill entire remaining width. This comes from my websites, this is striped from all unnecessary stylings and elements. Up until the moment where the "problem" remains.

There has been tutorials relying on margins and/or making everything float. But I cannot change my layout now. It's too perfect (*o*). Changing this would force me to change layout of website a lot, even though website is almost done.

[gentlemedia]

What happend with the styling of div#four. Anyways... If you want the last div fill the remaining width without setting a width for it, this is only doable with CSS3 Flexbox. Not with floats or inline-block! It can also be done with JS of course, but is a bad option imo.

[Aeonix]

What happend with the styling of div#four. Anyways...

The entire <nav> creation is in progress.

CSS3 Flexbox was the answer exactly. LOL. 2 lines of code instead place of 15.

[gentlemedia]

Yeah, Flexbox is a powerful layout module. Combine it in the future with the new Grid layout module and we can finally create any complex layout with minimal code, with a semantic and SEO friendly source order and without hacking our way around stuff.

If you have to support older browsers, there is also a JS polyfill for Flexbox.