How do I align all my div's in one line? - html

Question

I've looked at a bunch of websites, but none of them worked for me. I'm probably missing something really simple.
#container {
width:100%;
}
#one {
background-color:blue;
width:20%;
height:50%;
}
#two {
background-color:green;
width:20%;
height:50%;
}
#three {
background-color:yellow;
width:20%;
height:50%;
}
#four {
background-color:orange;
width:20%;
height:50%;
}
#five {
background-color:red;
width:20%;
height:50%;
}
This is what I want it to look like:
It doesn't display a lot, which I suspect is because of the height:50%...
Thanks in advance :)

Answer 1

You just need to add float left to each id in your container. This is a truncated version, no need to add the same css to each of your separate ids.
#container #one, #container #two, #container #three, #container #four, #container #five {
float:left;
}
or you can use display inline block
#container #one, #container #two, #container #three, #container #four, #container #five {
display:inline-block;
}
To center the divs if any space is left over you can add text align center to ensure the divs in your container are centered properly. This only works when using display block inline on your container.
#container {
text-align:center;
}

Answer 2

To put all the divs in the same line
use
display:inline-block;
if want to show divs in next line,
use
display:block;
default is set to block;
#container {
width:100%;
}
#one,#two,#three,#four,#five{
width:20%;
height:50%;
}
#one {
background-color:blue;
display:inline-block;
}
#two {
background-color:green;
display:inline-block;
}
#three {
background-color:yellow;
display:inline-block;
}
#four {
background-color:orange;
}
#five {
background-color:red;
}
<div id="container">
<div id="one">
One
</div>
<div id="two">
Two
</div>
<div id="three">
Three
</div>
<div id="four">
four
</div>
<div id="five">
five
</div>
</div>
Hope it helps

Answer 3

I've modified your code a bit but this should output what you are looking for.
You display the divs inline, and position them relatively with a slightly negative margin so that they take up 20% of the width each.
In a comment you mentioned you want to "make it exactly 50% tall", so you need to give the body 100% height, then set the divs to have 50% height:
html,
body {
height: 100%;
}
div {
display: inline-block;
width: 20%;
height: 50%;
position: relative;
margin: -2px;
}
#one {
background-color: lightblue;
}
#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">
</div>

Answer 4

im not sure if that's what you're asking but maybe you just need
div{float:right;}

Answer 5

Try this:
#container {
width: 100%;
height: 300px;
border: 1px solid #000;
}
#container div {
width: 20%;
height: 50%;
float: left;
}
#element-1 {
background-color: red;
}
#element-2 {
background-color: blue;
}
#element-3 {
background-color: pink;
}
#element-4 {
background-color: yellow;
}
#element-5 {
background-color: green;
}
<div id="container">
<div id="element-1"></div>
<div id="element-2"></div>
<div id="element-3"></div>
<div id="element-4"></div>
<div id="element-5"></div>
</div>
I have helped in some way