Unable to set width of a div

Question

I am trying to set the width of the div with a class colors either in percentage or in pixels but I am failing to do it.

var colors = ["RED", "GREEN", "BLUE", "YELLOW", "PURPLE"];
for (var h = 0; h <= 4; h++) {
  for (var i = 0; i <= colors.length - 1; i++) {
    var element = "<div class='colors' id='color" + i + "'>" + colors[i] + "</div>";
    var sample = "sahdkj";
    $('#gameContainer').append(element);
  };
  $('#gameContainer').append("<br/><br/>");
}

body {
  margin: 10px;
}

.container {
  border: 2px solid #e7e7e7;
  border-radius: 3px;
  width: 407px;
}

.colors {
  display: inline;
  border: 1px solid black;
  width: 20%;
  position: relative;
  top: 10px;
  bottom: 10px;
  margin: 10px;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="container" id="gameContainer">

  </div>
</body>

You have 3 good answers... Please select one and close that easy question. — Louys Patrice Bessette, Jan 25 '18 at 07:06
Possible duplicate of [What is the difference between display: inline and display: inline-block?](https://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block) — Louys Patrice Bessette, Jan 25 '18 at 07:11

score 4 · Answer 1 · answered Jan 25 '18 at 06:56

Change display: inline; to display: inline-block;

var colors = ["RED", "GREEN", "BLUE", "YELLOW", "PURPLE"];
for (var h = 0; h <= 4; h++) {
  for (var i = 0; i <= colors.length - 1; i++) {
    var element = "<div class='colors' id='color" + i + "'>" + colors[i] + "</div>";
    var sample = "sahdkj";
    $('#gameContainer').append(element);
  };
  $('#gameContainer').append("<br/><br/>");
}

body {
  margin: 10px;
}

.container {
  border: 2px solid #e7e7e7;
  border-radius: 3px;
  width: 500px;
}

.colors {
  display: inline-block;
  border: 1px solid black;
  width: 20%;
  position: relative;
  top: 10px;
  bottom: 10px;
  margin: 10px;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="gameContainer">

</div>

score 4 · Answer 2 · edited Jan 25 '18 at 07:02

The problem is display: inline;, you can not set width or height to inline element e.g <span>, use display: inline-block; instead.

this is your updated code.

var colors = ["RED", "GREEN", "BLUE", "YELLOW", "PURPLE"];
for (var h = 0; h <= 4; h++) {
  for (var i = 0; i <= colors.length - 1; i++) {
    var element = "<div class='colors' id='color" + i + "'>" + colors[i] + "</div>";
    var sample = "sahdkj";
    $('#gameContainer').append(element);
  };
  $('#gameContainer').append("<br/><br/>");
}

body {
  margin: 10px;
}

.container {
  border: 2px solid #e7e7e7;
  border-radius: 3px;
  width: 407px;
}

.colors {
  display: inline-block;
  border: 1px solid black;
  width: 20%;
  position: relative;
  top: 10px;
  bottom: 10px;
  margin: 10px;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="container" id="gameContainer">

  </div>
</body>

Hanif · Answer 3 · 2018-01-25T07:04:44.013

Try following code width, height, padding, margin dose not work properly on inline element what is you set by CSS display: inline;

.colors {
        display: inline-block; /*Modified line*/
        border: 1px solid black;
        vertical-align:top; /* added line, best practice when you apply "display: inline-block;" */
        width: 20%;
        position: relative;
        top:10px;
        bottom: 10px;
        margin:10px;
        padding: 5px;
    }

score 1 · Answer 4 · edited Jan 25 '18 at 07:08

1

Change display property of .colors class inline to inline-block

inline-block elements are like inline elements but they can have a width and a height.

edited Jan 25 '18 at 07:08

Louys Patrice Bessette

33,375
6
36
64

answered Jan 25 '18 at 07:06

Bachcha Singh

3,850
3
24
38

score 0 · Answer 5 · answered Jan 25 '18 at 07:08

0

Change display: inline; -> display: inline-block;

answered Jan 25 '18 at 07:08

KingFeming

1,053
10
21

Unable to set width of a div

5 Answers5