horizontal menu with 4 equally spaced elements - css

Question

I want to create a horizontal menu with 4 equally spaced elements. The menu has to be always sticked the browsers bottom.
The tricky part is, that the first elements string has to start at the left margin, and the last elements string hast to end at the right margin.
The strings between them should be equally spaced. The width of the menu should be scalable.
This is so far my closest solution, its not accurate tho :/
/UPDATE/ Collection should start at the edge of the browsers screen and Contact should end at the right edge of the browsers screen. (So with margins i meant the browsers very edge...)
DEMO:https://jsfiddle.net/t8kn1nch/
Do you have an idea?
HTML:
<div id="navigation">
<div id="collection">collection</div>
<div id="shopabout">
<div id="shop">shop</div>
<div id="about">about</div>
</div>
<div id="contact">contact</div>
</div>
CSS:
#navigation{
position: absolute;
bottom: 0;
width: 100%;
}
#navigation div{
display: inline-block;
}
#navigation #collection{
float: left;
}
#navigation #shopabout{
width: 100%;
display: inline;
}
#navigation #shop{
width: calc(100%/1.8);
text-align: center;
}
#navigation #about{
display: inline;
}
#navigation #contact{
float: right;
}

Answer 1

See jsfiddle with working solution:
https://jsfiddle.net/45n3d6hs/2/
Css:
#navigation {
position: absolute;
bottom: 0;
width: 100%;
}
#navigation #collection, #navigation #contact {
width: 25%;
float:left;
}
#navigation #shop, #navigation #about {
width: 50%;
float: left;
}
#navigation #shopabout {
width: 50%;
float: left;
}

Answer 2

Altough you can use some workarounds, proper solution here is to use flexbox.
#navigation {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
flex-direction: row;
align-items: stretch;
}
#collection, #contact {
width: 25%;
}
#contact {
text-align: right;
}
#shopabout {
width: 50%;
display: flex;
flex-direction: row;
}
#shop, #about {
width: 50%;
text-align:center;
}
Here's my fiddle, let me know if it's a solution you needed.

Answer 3

Something like THIS?
* {
margin: 0 0 0 0;
}
body {
background-color: black;
}
#navigation {
width: 100%;
}
#navigation > div {
display: inline-block;
width: 25%;
text-align: center;
background-color: red;
}
#navigation > div:first-child, #navigation > div:last-child {
background-color: brown;
}
<div id="navigation">
<div id="collection">
collection</div><div id="shop">
shop</div><div id="about">
about</div><div id="contact">
contact</div>
</div>
The trick here is with HTML, using display: inline-block makes the space between divs to be readed just like an element, a spacebar.
Any white space between divs would ruin this layout, since you're taking 25% of the width with every div!

Answer 4

OK try this CSS.
#navigation{
position: fixed;
bottom: 0;
width: 100%;
}
#collection {
width:25%;
}
#contact {
width:25%;
}
#shopabout {
width:50%;
}
#shop,
#about {
width:50%;
}
#navigation div{
display: inline-block;
text-align:center;
float:left;
}
#navigation #contact {
text-align:right;
}
#navigation #collection {
text-align:left;
}