Having difficulty adjusting the width of a div element

I've been struggling to adjust the width of the div assigned with the colors class, whether in percentage or pixels.

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>

javascriptjqueryhtmlcss

Answer №1

Update the CSS from 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>

Answer №2

The issue lies in using display: inline;, as you cannot define a width or height on an inline element like <span>. Instead, use display: inline-block;.

Here is your revised 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>

Answer №3

If you find that the CSS properties width, height, padding, and margin are not working properly on an inline element that has been styled with display: inline;, try using the following code instead:

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

Answer №4

Modify the CSS display property for the .colors class from inline to inline-block

inline-block elements behave like inline elements, but they can have specified width and height properties.

Answer №5

Update the CSS property 'display' from inline to inline-block;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using CSS to align and place elements

Currently facing a challenge with my HTML/CSS code regarding the horizontal centering of two divs (A, B) within one absolutely positioned div (C) that contains background images. Key aspects to consider: The bottom edge of the larger div (A) should alig ...

csshtmlbackground-imagecss-position

Steps for aligning an image and text within an icon next to each other

I'm looking to align a small PNG image next to some text within an icon. How can I achieve this? Currently, they are stacked vertically. Here is the current layout - I want the two elements side by side instead. The structure of the division is unique ...

javascriptcssfrontend

The POST function isn't functioning correctly within the temp.js file

My issue with the post method: var newUser = { "user5" : { "name" : "john", "password" : "qwerty123", "profession" : "developer", "id": 5 } } app.post('/createUser', function (req, res) { // Reading existing use ...

javascriptjsonnode.jsexpress

Using jQuery to define color

All checkboxes are expected to have relevant information. Change the background color of the text boxes checked to #9cf. Additionally, add the string "Additional Options" before the text boxes. Note: The verification box format in these forms should be lik ...

jquery

Firestore query is returning empty results upon page initialization, but provides data upon subsequent re-renders in React Native

ISSUE I'm encountering an issue where I am unable to fetch documents from a Firestore collection when the page loads. Despite executing the query multiple times during loading, it does not return any results. However, if I trigger the query by changi ...

javascriptfirebasereact-nativegoogle-cloud-firestore

Caution: React does not support the `textColor` prop for a DOM element

Receiving an alert message saying: Warning: React does not recognize the 'textColor' prop on a DOM element (all other functionalities are functioning properly). This is how I'm using it in my component: import { ImageWithFallback, Paper, Ta ...

javascriptreactjsmaterial-ui

Bullet points colliding with one another

Is there a way to display an unordered list with list items in two rows and multiple columns without the bullet points overlapping? I have tried adjusting margins, but is there a more elegant solution to this issue? The requirement is to maintain the bul ...

htmlcssflexbox

Issue with Spring MVC: 404 error when making an ajax POST request

I have been attempting to send an HTTP POST request to a Spring controller with a JSON array, but I keep receiving a 404 response. Despite referring to various tutorials including: SpringMVC Ajax validation Parsing JSON in Spring MVC using Jackson JSON P ...

jqueryajaxjsonspringspring-mvc

Is there a way to hide a button on this virtual keyboard after it has been clicked?

After creating a virtual keyboard using HTML and CSS, I am looking to implement JavaScript code that will hide a button after it is clicked. Here is the code I have tried so far: function hideButton() { var button = document.getElementById("simple_butto ...

javascriptcsshtml

Combining Laravel with React

Currently in the process of developing a substantial real estate listings platform with react and laravel. Can you suggest which approach would be better for this project and explain why? Option 1: Implement laravel react presets and store all react compo ...

javascriptphplaravelreactjslaravel-5

Utilizing asynchronous AJAX request to dynamically add a new row to the table with corresponding data

// Below is the JSP page code: function sendAjaxRequest() { var City=$('#City').val(); window.alert(City+"New City Created"); $.ajax ({ type: "GET", async : true, url: "http://localhost:8080/OnlineStore/kmsg/grocery/A ...

jqueryajax

How can I adjust the position of a target point in the chase camera using THREE.js?

Recently, I've delved into the world of THREE.js and decided to create a game featuring a spaceship as the main element. Utilizing a chase camera for my model, I encountered a challenge where I needed to adjust the camera's position in relation t ...

javascriptthree.js

Is there a way to substitute the HOC with a single call and solely modify the prop?

One issue I've encountered in my project is the repetitive use of a Higher Order Component (HOC) for the header. Each time it's used, the props are set to determine whether header links should be displayed or not. My objective is to streamline th ...

javascriptreactjstypescript

Guide to importing multiple controllers using express

For my upcoming full stack project, I am working on various controllers like signup, login, and profile. Instead of manually requiring each controller and adding them to the app using individual lines of code, I am seeking a more efficient solution. I env ...

javascriptnode.jsexpress

How to Improve Performance for 15,000 Socket.io Users

I am facing an issue with my chat application that has large chatrooms, with 15,000 users connected to a single room. Only a few have the privilege to write messages, so in theory, there should not be a significant load on the server. However, I have obser ...

javascriptnode.jsperformancewebsocketsocket.io

The headline box is displaying CSS code instead of the content. How can this issue be resolved?

Having an issue with a WordPress template that features a blue "headline" box that I need to change the color of to #333399. I tried inspecting the element, browsing through the code, and identified the code below as what needed modification: #headline, # ...

csswordpress

Why are my subpages not appearing when using nodejs?

Currently, I'm in the process of creating a basic node app for my website. So far, I have set up my app.js, controllers, and routers. However, I am encountering an issue where two out of three subpages return a 404 error, while the index page works ...

htmlnode.jsexpress

Error: The module PosModel is not defined

Recently, I took over the responsibility of working on the models.js file for the point_of_sale module. My task was to add a new model by integrating the following code: openerp.dewieuw = function(instance, local) { //module is instance.point_of_sale var ...

javascriptinheritanceodootypeerrorpoint-of-sale

PhantomJS Karma encountering SyntaxError when trying to export variables

I've encountered an issue while running Karma and PhantomJS. When I attempt to run, the console displays the following message: 22 03 2016 14:58:47.865:WARN [karma]: No captured browser, open http://localhost:9876/ 22 03 2016 14:58:47.875:INFO [karm ...

javascriptnode.js

`How can you generate navigation paths using the ngRoute module?`

I am currently working on creating a basic navigation system like the one illustrated below: html: <html ng-app="myapp"> <body> <ul> <li><a href="pages/sub1">sub1</a></li> <li><a href="pages/ ...

javascriptangularjs