How do I float div's to the bottom of a page? - html

Question

Like the question says, I can't float anything to the bottom... I tried float:absolute and it showed that. There's supposed to be 5 different boxes, but it only shows one of them. This is my code:
html,
body {
height: 100%;
}
#one,#two,#three,#four,#five {
margin:0;
padding:0;
float:left;
display:inline-block;
height:50%;
width:20%;
bottom:0;
right:0;
left:0;
position:absolute;
}
div {
margin:-2px;
padding:-2px;
}
#container {
display: inline-block;
width: 100%;
height: 100%;
position: relative;
}
#one {
background-color: blue;
}
#two {
background-color: green;
}
#three {
background-color: yellow;
}
#four {
background-color: orange;
}
#five {
background-color: red;
}
<div id="one">
</div>
<div id="two">
</div>
<div id="three">
</div>
<div id="four">
</div>
<div id="five">
Thanks in advance :)

Answer 1

Your code's not working because you've essentially set all 5 boxes to stack on top of each other by having absolute positioning, 0 margin and left set to 0 for all 5 boxes, so everything takes the same positioning on the bottom left corner of the screen. If you remove right:0 and add an individual left property for each box, you should be able to have all 5 boxes in a neat row at the bottom, like so:
html,
body {
height: 100%;
}
#one,#two,#three,#four,#five {
margin:0;
padding:0;
float:left;
display:inline-block;
height:50%;
width:20%;
bottom:0;
left:0;
position:absolute;
}
#container {
display: inline-block;
width: 100%;
height: 100%;
position: relative;
}
#one {
background-color: blue;
left:0;
}
#two {
background-color: green;
left:20%;
}
#three {
background-color: yellow;
left:40%;
}
#four {
background-color: orange;
left:60%;
}
#five {
background-color: red;
left:80%;
}
jsfiddle: https://jsfiddle.net/hq2hv1pw/
Also on a side note, I'd combine the selector with a class for the CSS style that has 5 IDs haha.
Hope this helps you out