css make divs display next to each other in bar

Question

I am trying to add all of these skills on one bar. The text does not need to show,just want them all to display on the same one instead of four separate

* {box-sizing: border-box}

.container {
  width: 100%;
  background-color: #ddd;
}

.skills {
  text-align: right;
  padding-right: 20px;
  line-height: 40px;
  color: white;
}

.html {width: 10%; background-color: #4CAF50;}
.css {width: 10%; background-color: #2196F3;}
.js {width: 65%; background-color: #f44336;}
.php {width: 60%; background-color: #808080;}

<html>
<head>
<style>

</style>
</head>
<body>

<h1>My Skills</h1>

<p>HTML</p>
<div class="container">
  <div class="skills html">10%</div>  
</div>

<p>CSS</p>
<div class="container">
  <div class="skills css">80%</div>
</div>

<p>JavaScript</p>
<div class="container">
  <div class="skills js">65%</div>
</div>

<p>PHP</p>
<div class="container">
  <div class="skills php">60%</div>
</div>

</body>
</html>

ones. Because its four, all would need to be 25%

Possible duplicate of [How to place two divs next to each other?](https://stackoverflow.com/questions/5803023/how-to-place-two-divs-next-to-each-other) — Don, Aug 04 '17 at 16:48
this question has been asked and answered before. Try searching — Don, Aug 04 '17 at 16:48

score 0 · Accepted Answer · answered Aug 04 '17 at 17:35

The first thing to know is that divs are block elements, and will take up 100% of their containers (in this case the container div, which is 100% of the <body>). You need to set the display property to display: inline-block. This will allow them to be a set width.

Second, the percentages for the widths need to add up to 100% or less. More than 100%, and they will start to wrap to the next line.

See the code snipet below.

Edit: should also mention that all of your smaller divs need to be in one container, not each in their own container, if you want them to appear together like that.

* {box-sizing: border-box}

.container {
  width: 100%;
  background-color: #ddd;
}

.skills {
  text-align: right;
  padding-right: 20px;
  line-height: 40px;
  color: white;
  display: inline-block;
}

.html {width: 10%; background-color: #4CAF50;}
.css {width: 10%; background-color: #2196F3;}
.js {width: 35%; background-color: #f44336;}
.php {width: 30%; background-color: #808080;}

<html>
<head>
<style>

</style>
</head>
<body>

<h1>My Skills</h1>

<div class="container">
  <div class="skills html">10%</div>  

  <div class="skills css">80%</div>

  <div class="skills js">65%</div>

  <div class="skills php">60%</div>
</div>

</body>
</html>

css make divs display next to each other in bar

1 Answers1