Adjust the width of a div element to match its content when nested within another div element

I am looking for a solution in the provided code snippet where the width of the .content div can automatically adjust to fit the .product divs inside it.

It is important that the width adjusts dynamically as there could be different numbers of products and a fixed width would not work well here.

Check out this JSFiddle link

HTML

<div class="container">
<div class="content">
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">
        <p>string</p>
    </div>
    <div class="product">

    </div>
</div>

CSS

.container {
height:100px;
width:400px;
background:red;
padding:0 10px;
overflow-x: hidden;



}
    .content {
background:#eee;
height:70px;


    width: 2000px;

}
.product {
height:80px;
width:100px;
display: inline-block;
float: left;
}    

Answer №1

If you want to determine the number of products using jQuery and adjust the width of your content accordingly, here's a way to do it. Keep in mind that this method assumes all products are the same width, such as 100px.

var products = $('.product').length;
var width = products * 100;
$('.content').css('width', width + 'px');    

Check out this example

To ensure a nice fit, you can also change the width of your container. Just remember to remove any width settings on the content.

var products = $('.product').length;
var width = products * 100;
$('.container').css('width', width + 'px');

See another example here

Answer №2

Leave the width unspecified, and it will adjust its size based on the dimensions of the items?

Answer №3

When adjusting the width of your content, consider using

min-width: whatever;

This allows you to set a minimum width while still allowing the content to expand as needed.

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

The specified function is not recognized within the HTMLButtonElement's onclick event in Angular 4

Recently diving into Angular and facing a perplexing issue: "openClose is not defined at HTMLButtonElement.onclick (index:13)" Even after scouring through various resources, the error seems to be rooted in the index page rather than within any of the app ...

Display a div on page scroll using jQuery

Check out this snippet of HTML code I have: HTML <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <div id="box4"></div> <div id="box5"></div> And here's a segment of C ...

Choose an identifier from a CSS class

I've been experimenting with a code pen that I stumbled upon: http://codepen.io/surjithctly/pen/pLDwe When I encase the checkbox in a div with the class "mynav," it stops functioning as intended. How do I implement the specified styling for the check ...

What steps can I take to stop the window/body from scrolling "through" a modal div?

Let me simplify my layout for you: <body> [... lots of content ...] <div id="modal-overlay"> </div> </body> The body has so much content that the whole page scrolls. The styling for #modal-overlay looks like this: #m ...

Search dropdown feature using JQuery

I want to enhance my WordPress form that utilizes gravity forms and chained selects add-on by adding a search input field above each dropdown. The data in the dropdown fields is fetched from a CSV file. Here's the JQuery code attached, can someone hel ...

Ways to show Bootstrap toast upon page load?

I recently included a query string parameter in my index to display error messages and notifications. However, I'm facing difficulties in getting it to show up when the page is first loaded. Currently, I am utilizing the $('#toast').toast(& ...

What could be the reason for the unexpected occurrence of my CSS rule application?

In my collection of CSS files, I have a specific class defined in the common CSS file: common.css .container-example { display: grid; height: 100%; width: 100%; background-color: black; } .container-example > div { overflow: hidden; } This ...

Errors occurred when trying to use Jquery to handle a JSON response

enter code here function customPaging(action, action1, page) { alert("in customPaging"); $.getJSON("./paging.do?action="+escape(action)+"&p="+escape(action1)+"&str="+escape(page), function(data){ alert("Length: "+data.length); var options = ...

The jQuery datetimepicker fails to reflect changes made to the minDate property

I have encountered a datetimepicker object that was previously set up with the following configuration: $('#startDate').datetimepicker({ monthNames: DATE_TIME_MONTHS_NAMES, monthNamesShort: DATE_TIME_MONTHS_NAMES_SHORT, dayNames: DAT ...

Obtain the content enclosed within parentheses using JavaScript

const str = "(c) (d)"; I need to separate the given string into an array The result should be [0] => 'c' [1] => 'd' ...

What is the best way to extract the text "TSV SCHOTT Mainz" from HTML using Python?

https://i.sstatic.net/2KDgz.png Hello, I'm struggling to locate the text "TSV SCHOTT Mainz" in the HTML code because I am unsure of which part to target. I have attempted the following: import requests from bs4 import BeautifulSoup # URL of the Bo ...

Struggling to figure out how to properly shuffle my deck of cards array in JavaScript. Can't seem to grasp how to pass the array correctly

Currently, I am engrossed in my personal project and watching tutorials just for the fun of it. My goal is to create a game for my school project which is inspired by a war card game that I used to play as a child - where the highest number wins. I have ...

Adjusting the space between div elements when resizing the window

I am seeking guidance on how to ensure that the text boxes (div) on my page adjust themselves properly when the size of the page is shrunk. Currently, the text boxes tend to overlap when the screen size is smaller, which is not desirable. I need the boxes ...

What is the best method to choose the following sentence once the final * has been identified

In the navigation text, my objective is to pick out the final sentence following * For example; Home*Development*Mobil and Web Development I am only interested in selecting the last sentence after * --> (Mobil and Web Development) ...

How to precisely position a div within a table cell using Firefox

Currently, I am developing a script that replaces ads. At times, advertisements show up inside of <td> tags like the following: <tr> <td align="right" width="40%"><a><img src="ad.jpg"></a></td> <td>123&l ...

When you hover over the vertical sidebar menu in Bootstrap material design, a submenu will appear

Looking to create a three-column display that functions as one submenu when hovering over each menu item? <div class="container"> <div class="row"> <div class="col-sm-4"> <ul class="vertical-nav"> <li>&l ...

What's the reason this doesn't vanish when I hover over it?

Check out this JsFiddle link HTML Code <p>I am a duck</p> CSS Code p:hover { display:none; } Why is the text not disappearing when hovered over? ...

Is the process of adding a new row by duplicating an already existing row dynamic?

I've encountered an issue where a row in a table is not being displayed because the CSS style has been set to display:none. Here's the HTML table: <table class="myTable"> <tr class="prototype"> ........ </tr> </ ...

Receiving Array Data from JSON and Listing Results

Once I retrieve the first row result from a JSON array, I want to display all the results using the jQuery each method. Here is the code snippet: $(document).ready(function () { $("#btnsearch").click(function() { valobj = $('#search_box' ...

Using three.js to set the HTML background color as clearColor

How can I set the HTML background as clearColor using three.js? Here is the code snippet for three.js: // Setting up the environment var vWebGL = new WEBGL(); var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / ...