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

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

我不确定这是你要问的，但也许你只是需要

div{float:right;}

Answer 4

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

Answer 5

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>