Tips on automatically adjusting the width of a div to fit the content, maintaining center alignment, and ensuring the contents float to the left

I am facing an issue with a div element that has multiple children. My goal is to have the children neatly fit to the bottom left of the grid when the window expands, utilizing the next available space efficiently. However, as the div expands with the window, it creates unnecessary extra room on the right side before adding another column. I am struggling to center the div while keeping the content floating left and ensuring that the div is only as wide as necessary for the content.

.wrapper{
  display:inline-block;
  width:auto;
  text-align:center;
  border:solid black 5px;
  margin:10px auto;
}

.wrapper > *{
 margin: 0 auto;
 border:solid black 1px;
 text-align:center;
 display:inline-block;
 float:left;
 width:150px;
 height:150px;
 margin: 0px 10px 10px 10px;
}

Despite trying various combinations of block elements and inline-block elements, I have not been able to find a solution.

I apologize if my explanation was unclear, but it may make more sense when looking at the provided code in the fiddle.

https://jsfiddle.net/rfzk5fhx/

javascripthtmlcss

Answer №1

It's possible that I may not fully understand your question, but if you're looking to have your container div adjust its width and height based on its content, you can achieve this by using inline-block display and removing any width and height CSS properties.

Below is the code snippet:

ul {
    background: #aaa;
    padding: 10px;
    display: inline-block;
    margin:10px auto;
}

You can view the updated fiddle at - https://jsfiddle.net/rfzk5fhx/2/

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

Flipping the order of elements in an array using JavaScript as described in the

While I am aware there are simpler methods to reverse arrays in JavaScript, I am seeking assistance to fully understand how this particular reverse method works. Your help in clarifying this is greatly appreciated. function reverseArrayInPlace(array) ...

javascriptarrayseloquentreverse

Steps for converting a JSON response into a .json file.Steps to transform a

I am looking to create a .json file within my local project directory. My goal is to store the response from a fetch API call, which is an array of objects, into a .json file. Here is the code snippet I am working with: ts : getRecords(){ this.serv ...

javascriptjsonangular

How can I extract the domain name using a regular expression in JavaScript?

I am struggling with creating a regular expression to extract the main domain name from a URL. The URLs I have are: http://domain.com/return/java.php?hello.asp http://www.domain.com/return/java.php?hello.asp http://blog.domain.net/return/java.php?hello.as ...

javascriptregexurl

Tips for enabling only a single div to expand when the "read more" button is clicked

I'm having trouble with my blog-style page where I want only one "read more" link to expand while collapsing the others. I've tried various jQuery methods and HTML structures, but haven't been able to achieve the desired result. Can someone ...

jqueryhtml

Problem with sending variable via AJAX

Hey everyone, I'm attempting to send form data along with an extra variable using AJAX. Here's the code snippet: function tempFunction(obj) { var data = $('form').serializeArray(); data.push( { no: $(obj).at ...

javascriptphpjqueryajax

Do we need to have the 'input type file' field as

I am currently working on a PHP form that includes mandatory fields for saving the data. For example: <td><input class="text_area required" type="text" name="new field" This form also has Javascript code with file upload functionality, which I ...

javascriptphp

Ways to adjust the dimensions of a textarea based on character count

When attempting to utilize the cols and rows attributes of the <textarea> element in order to set the width and height in characters, I have encountered issues even without implementing CSS. Take a look at this example: link I have configured a 5x5 ...

htmlcsstextarea

"Effortlessly search and replace text with a click of a button using jQuery - A beginner

Is there a way to implement a search and replace function for text on button click using jQuery or JavaScript? For example, in Visual Studio, pressing ctrl + f opens a box that allows for text replacement. Is it possible to achieve the same functionality ...

javascriptjquery

Using Vue.js to share events and data across various components

I am currently working on an application that features a Google map with a places autocomplete controller, similar to the example provided by Google at this link. Whenever an address is searched or selected, or when the map bounds are changed, I trigger a ...

javascriptvue.jsvuejs2vue-component

LovelyStew - various cards containing numerous nested attributes

In an attempt to view all "cards" on the California State Lotto page: There are X draws, each represented by a 'Card': Sample Card <div class="card"><div class="card-header" id="heading-1"><button class="accordion--toggle w-100 ...

pythonhtmlweb-scrapingbeautifulsoup

Customizing the cursor for disabled custom controls in Bootstrap 4

I'm having trouble changing the cursor for disabled custom-control elements like checkboxes and radiobuttons. The following style isn't working as expected: .custom-control-input:disabled ~ .custom-control-label::before { cursor: not-allowe ...

cssbootstrap-4twitter-bootstrap-4

The Protractor element appears to be detached from the page's document

Currently, I am facing a challenge while using protractor in my Angular6 Project. The issue revolves around clicking elements within the project. Situation: Within a table row, there is a list of elements that I need to click on individually. Challenge: ...

javascriptjqueryangularprotractor

CSS - Issue with dropdown sub-menu alignment despite using absolute positioning in relation to parent button

Title fairly explains it all. I'm having trouble getting my dropdown submenus to align perfectly with the bottom of the parent list item element. The list item has a relative position, while the submenu has an absolute position. I've attempted ...

htmlcssdrop-down-menusubmenu

Access account without providing all necessary identification documents

I'm currently facing an issue with my User Schema, as I initially defined 3 inputs for name, surname, and email. However, I now want to allow users to log in only with their email and password, without having to input their name and surname. How can I ...

javascriptexpresspassport.jsbackendpassport-local

Select three unique numbers at random from the total number of elements in the array

I currently possess an array containing a variety of objects. At present, there are 21 objects in this array, although this number is subject to change. To iterate through the array and generate the necessary content, I am implementing the following code ...

javascriptarraysloopsrandom

Combining React with Typescript allows for deep merging of nested defaultProps

As I work on a React and Typescript component, I find myself needing to set default props that include nested data objects. Below is a simplified version of the component in question: type Props = { someProp: string, user: { blocked: boole ...

javascriptreactjstypescriptreact-props

Controlling Formatting in ASP.NET

Feeling puzzled by a seemingly simple question with no clear solution in sight. We're attempting to transition an interface to an ASP.NET control that currently appears like this: <link rel=""stylesheet"" type=""text/css"" href=""/Layout/CaptchaLa ...

asp.netjavascriptcsscontrolsformatting

Implementing Bootstrap tooltips in content that can be scrolled

I need help with positioning two containers, which you can view in this FIDDLE. Both containers may contain a lot of content, so I have applied overflow: auto to both of them. This is the HTML structure: <div id="maincontainer"> <d ...

javascriptjqueryhtmlcsstwitter-bootstrap

Verify if an express module has a next() function available

Is there a method to check if there is a function after the current middleware? router.get('/', function(req, res, next){ if(next){//always returns true } }); I have a function that retrieves information and depending on the route, thi ...

javascriptnode.jsexpressmiddleware

Looking for the next jQuery class that is not a sibling to toggle the slide

By default, all elements with the class .setupData are hidden. I want to be able to toggle the immediate (next in DOM) .setupData element when I click on an element with the class .setupTitle. Even though I've tried multiple variations of the follow ...

jqueryhtmlslidetoggle