CODEWITHSUNDEEP
javascriptjqueryhtmlcss
A.Arya
A.Arya

Reputation: 1

Unable to set width of a div

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>

Upvotes: 0

Views: 774

Answers (5)

KingFeming
KingFeming

Reputation: 1091

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

Upvotes: 0

Bachcha Singh
Bachcha Singh

Reputation: 3934

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.

Upvotes: 1

Hanif
Hanif

Reputation: 3795

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;
    }

Upvotes: 1

Tushar Acharekar
Tushar Acharekar

Reputation: 900

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>

Upvotes: 4

brk
brk

Reputation: 50291

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>

Upvotes: 4

Related Questions