Senpai Saitama Senpai Saitama - 1 month ago 8
CSS Question

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

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 :)

Lio Lio
Answer

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