<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.
